कैसे एक div अंदर छवि उत्तरदायी बनाने के लिए

Question

अनुसरण करता है के रूप में मेरे कोड है:

<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> 

मैं कैसे छवि उत्तरदायी बना सकते हैं मोबाइल (360X640px) और iPad (768X1024px) के लिए? क्या आप कृपया मुझे सीएसएस कोड दे सकते हैं?

मुझे एक पंक्ति में आईपैड में मोबाइल और चार में दो छवियां देना है !!

Answer 1

सेट चौड़ाई और प्रतिशत में ऊंचाई

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

उपयोग मीडिया क्वेरी

/* लैंडस्केप */

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

//use your style for landscape 
              } 

/* पोर्ट्रेट (यानी संकीर्ण व्यूपोर्ट) */

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

// your style for portrait 
              } 

Answer 2

यहां है

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

संदर्भ लें: कोड आप का पालन करना http://html5hub.com/html5-picture-element/

Answer 3

निकालें width और img टैग से height विशेषता और इस छवि के लिए सीएसएस फ़ाइल में जोड़ने 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> 

आप सीमा को हटा सकते हैं ।

यदि आप सीमा हटाते हैं, तो आप एक पंक्ति में 4 पंक्तियों के लिए चौड़ाई 25% और एक पंक्ति में 2 पंक्तियों के लिए 50% का उपयोग कर सकते हैं।

Answer 5

मीडिया क्वेरी का उपयोग करके आप छवियों को अपनी पसंद के अनुसार विभाजित कर सकते हैं।

.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

इस छवि को आप एक div में एक पृष्ठभूमि छवि के रूप में स्थापित और कवर के रूप में पृष्ठभूमि आकार सेट दे

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