div wather में छवि को फिट करने के लिए कैसे करें छवि आकार अधिकतम तो div या min है तो div

Question

मैं div में एक छवि को कैसे फिट करूं? छवि का आकार अधिकतम तब div या min हो सकता है तो div।

एचटीएमएल कोड

<div class="main"> 
    <img scr="image.jpg"> 
</div> 

सीएसएस कोड

.main{ 
    height:200px; 
    width:200px; 
} 

img{ 
    // answer code 
} 

मैं कैसे करूँ निम्नलिखित के साथ छवि सीएसएस सेट: 100

छवि ऊँचाई चौड़ाई

1. छवि की ऊंचाई 100 और 300 और चौड़ाई 300

Answer 1

आप उपयोग कर सकते हैं: -

img { max-width: 100%; height: auto; } // This would help you to automatically fit the image. 

संपादित करें:

ऊपर सीएसएस कोड छवियों जिसका आकार div से भी बड़ा है के लिए आप में मदद मिलेगी। लेकिन छवियों के लिए फिट नहीं होगा जो div से छोटे हैं। JQuery के बारे में थोड़ी अपने लक्ष्य को हासिल करने के लिए, कृपया इसे नीचे खोजने की जरूरत होगी: -

$(document).ready(function(){ 
    imageWidth = $('.main img').width(); 
    parentWidth = $('.main').width(); 
    if (imageWidth > parentWidth) { 
     $('.main img').css('width', '100%'); 
    } 
}); 

क्या होता है जब छवि div वह खुद को आकार बदलता है और अपने आवश्यकता के अनुसार div करने के लिए फिट बैठता है की तुलना में छोटे है।

इसलिए सीएसएस के साथ-साथ दोनों स्थितियों के लिए काम करने के लिए स्क्रिप्ट रखें।

Answer 2

अपनी छवि हमेशा वर्ग है तो बस जोड़ने img{ width: 200px; height: 200px; }

यदि नहीं, तो

.main { 
    width: 200px; 
    height: 200px; 
    text-align: center; 
    display: table-cell; 
    vertical-align: middle; 
} 
img { 
    max-width: 200px; 
    max-height: 200px; 
    /* IE7 doesn't support display: table-cell property? so hack */ 
    *margin-top: expression((parentNode.offsetHeight.offsetHeight/2)-(parseInt(this.offsetHeight)/2) <0 ? "0" :(parentNode.offsetHeight/2)-(parseInt(this.offsetHeight)/2) +'px');  } 

यह बाहर की जाँच यहाँ http://jsfiddle.net/qBDT4/1/