nasıl bir div içindeki görüntü duyarlı hale getirmek için

Question

Şöyledir olarak Benim kodudur:

<div class="abc"> 
    <div class="bcd"> 
     <a href="#"> 
      <img class="img1" width="50" height="50"/> 
     </a> 
     <a> 
      <h3>Some Text</h3> 
     </a> 
    </div> 
    <div class="bcd"> 
     <a href="#"> 
      <img class="img1" width="50" height="50"/> 
     </a> 
     <a> 
      <h3>Some Text</h3> 
     </a> 
    </div> 
    <div class="bcd"> 
     <a href="#"> 
      <img class="img1" width="50" height="50"/> 
     </a> 
     <a> 
      <h3>Some Text</h3> 
     </a> 
    </div> 
    <div class="bcd"> 
     <a href="#"> 
      <img class="img1" width="50" height="50"/> 
     </a> 
     <a> 
      <h3>Some Text</h3> 
     </a> 
    </div> 
</div> 

nasıl görüntü duyarlı yapabilirsiniz Mobile (360X640px) ve iPad (768X1024px) için? Lütfen CSS Kodunu bana verebilir misiniz?

Mobil ve iki adet iPad'de tek bir görüntü vermek zorundayım. yüzde

Answer 1

grubu genişliği ve yüksekliği

<img class="img1" width="100%" height="100%"/> 

kullanım ortamı sorgu

/* Yatay */

@media screen and (min-aspect-ratio: 1/1) { 

//use your style for landscape 
              } 

/* Dikey (yani, dar bir görünüm) */

@media screen and (max-aspect-ratio: 1/1) { 

// your style for portrait 
              } 

Answer 2

İşte

img { 
    max-width: 100%; 
    height: auto; 
    } 

bakın: Kod izlemeniz gereken http://html5hub.com/html5-picture-element/

Answer 3

çıkarın width ve img etiketinden height özellik ve bu görüntü için CSS dosyasındaki eklemek max-width:100%; width:100%;

Answer 4

<style> 
    @media only screen and (max-width: 1024px) {  
     .abc .bcd{max-width:100%;height:auto;border:1px solid #ff0000;width:24%;display:inline-block;} 
     .abc .bcd a img{width:100%;height:auto;} 
    } 

    @media only screen and (max-width: 640px) { 
     .abc .bcd{max-width:100%;height:auto;border:1px solid #ff0000;width:48%;display:inline-block;} 
     .abc .bcd a img{width:100%;height:auto;} 
    } 
    </style> 

Sınırı kaldırabilirsiniz .

Kenarlığı kaldırırsanız, bir satırda 4 satır için% 25, ​​tek satırda da 2 satır için% 50 genişlik kullanabilirsiniz.

Answer 5

Medya sorgusunu kullanarak görüntüleri istediğiniz gibi bölebilirsiniz.

.abc{padding:0; margin:0; box-sizing:border-box; width:100%;} 
.bcd{display:inline-block;width:24%;} 
@media all and (max-width: 360px){ 
    .bcd 
    { 
    display:inline-block; 
    width:49%; 
    } 
} 

DEMO

Answer 6

<style> 
     html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block;}body { line-height: 1;}ol, ul { list-style: none;}blockquote, q { quotes: none;}blockquote:before, blockquote:after,q:before, q:after { content: ''; content: none;}table { border-collapse: collapse; border-spacing: 0;} 
     .container .bcd{float: left;position: relative;} 
     .container .bcd div{background-color: #fff;border: 1px solid #e4e4e4;border-radius: 5px;margin-top: 10px;min-height: 100px;} 
     .container .bcd div img{border-radius: 5px 5px 0 0;height: auto;width: 100%;} 
     .container .bcd div a.bottom{background: none repeat scroll 0 0 #fff;bottom: 4px;color: #000;font-size: 14px;padding: 9px 0 5px;position: relative;width: 100%;display: inline-block;} 
     .container .bcd div a.bottom h3{padding: 0 10px;} 
     @media (max-width: 700px) { 
      .bcd{width: 100%;} 
      .bcd div{margin: 0 10px} 
     } 
     @media (min-width: 700px) { 
      .bcd {width: 50%;} 
      .bcd:nth-child(odd) div {margin-left: 10px;margin-right: 5px;} 
      .bcd:nth-child(even) div {margin-left: 5px;margin-right: 10px;} 
     } 
    </style> 

<div class="container"> 
     <div class="bcd"> 
      <div> 
       <a href="#"> 
        <img class="img1" width="50" height="50"/> 
       </a> 
       <a class="bottom"><h3>Some Text</h3></a> 
      </div> 
     </div> 
     <div class="bcd"> 
      <div> 
       <a href="#"> 
        <img class="img1" width="50" height="50"/> 
       </a> 
       <a class="bottom"><h3>Some Text</h3></a> 
      </div> 
     </div> 
     <div class="bcd"> 
      <div> 
       <a href="#"> 
        <img class="img1" width="50" height="50"/> 
       </a> 
       <a class="bottom"><h3>Some Text</h3></a> 
      </div> 
     </div> 
     <div class="bcd"> 
      <div> 
       <a href="#"> 
        <img class="img1" width="50" height="50"/> 
       </a> 
       <a class="bottom"><h3>Some Text</h3></a> 
      </div> 
     </div> 
     <div class="bcd"> 
      <div> 
       <a href="#"> 
        <img class="img1" width="50" height="50"/> 
       </a> 
       <a class="bottom"><h3>Some Text</h3></a> 
      </div> 
     </div> 
     <div class="bcd"> 
      <div> 
       <a href="#"> 
        <img class="img1" width="50" height="50"/> 
       </a> 
       <a class="bottom"><h3>Some Text</h3></a> 
      </div> 
     </div> 
     <div class="bcd"> 
      <div> 
       <a href="#"> 
        <img class="img1" width="50" height="50"/> 
       </a> 
       <a class="bottom"><h3>Some Text</h3></a> 
      </div> 
     </div> 
     <div class="bcd"> 
      <div> 
       <a href="#"> 
        <img class="img1" width="50" height="50"/> 
       </a> 
       <a class="bottom"><h3>Some Text</h3></a> 
      </div> 
     </div> 
     <div style="clear: both;margin: 0px;padding: 0px;"></div> 
    </div> 

Demo

Answer 7

bu bir div arka plan resmi olarak ayarlayabilir ve kapak olarak

background-image: url('YOUR URL'); 
background-size: cover;