सीएसएस छवि स्केलिंग क्षेत्र के भीतर फिट करने के लिए

Question

सीएसएस के साथ कोई रास्ता है या अन्यथा किसी क्षेत्र के भीतर एक छवि फिट करने का कोई तरीका है। आइए कहें कि मेरे पास विभिन्न आकारों की कई छवियां हैं और मैं चाहता हूं कि वे सभी 150px के div के भीतर 100px से फिट हों। मैं छवियों को स्केल नहीं करना चाहता हूं, हालांकि कुछ लंबा हो सकते हैं और अन्य संकीर्ण हैं, मैं बस उन्हें छिपाने के साथ इस क्षेत्र के भीतर फिट होना चाहता हूं।

मैंने overflow:hidden का उपयोग करने के बारे में सोचा लेकिन यह आईई 6 में छिपा हुआ प्रतीत नहीं होता है।

कोई विचार?

बढ़िया

Answer 1

आप इस का उपयोग कर प्रयास करना चाहिए:

img{ 
    width: auto; 
    max-width: 150px; 
    height: auto; 
    max-height: 100px; 
} 

संपादित करें: ऐसा लगता है कि IE6 तरह अधिकतम-चौड़ाई और अधिकतम ऊंचाई गुण का समर्थन नहीं करता। हालांकि, आप यहां दिए गए वर्कअराउंड को कार्यान्वित कर सकते हैं: max-width, max-height for IE6

Answer 2

जब आप कहते हैं कि "इस क्षेत्र के भीतर फिट" बाकी छिपे हुए हैं, तो मुझे लगता है कि आप चाहते हैं कि छवि को बिल्कुल कम नहीं किया जाए और मूल रूप से किसी भी अतिरिक्त फसल को बंद कर दें।

मैं व्याख्या कर रहा हूं कि आप गलत सवाल हैं, लेकिन इसे आजमाएं और देखें कि यह उस प्रभाव को उत्पन्न करता है जिसे आप ढूंढ रहे हैं।

.img-holder { 
 
    width: 150px; 
 
    height: 150px; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 
.img-holder img { 
 
    position: absolute; 
 
    display: block; 
 
    top: 0; 
 
    left: 0; 
 
}

<div class="img-holder"> 
 
    <img src="http://img.playit.pk/vi/dH6NIe7wm4I/mqdefault.jpg" /> 
 
</div>

Answer 3

यह IE6 (के रूप में ओ पी के लिए आवश्यक) में काम नहीं करेगा, लेकिन पूर्णता के लिए आप एक केंद्रित रूप में CSS3 के background-size:cover का उपयोग कर और छवि स्थापित करने के नए ब्राउज़र पर आवश्यक प्रभाव को प्राप्त कर सकते हैं पृष्ठभूमि छवि। इसलिए जैसा:

div { 
    width:150px; 
    height:100px; 
    background-size:cover; 
    background-position:center center; 
    background-repeat:no-repeat; 
    background-image:url('somepic.jpg'); 
} 

Answer 4

यह मेरे लिए काम किया:

img.perfect-fit { 
    width: auto; 
    height: auto; 
    min-width: 100%; 
    min-height: 100%; 
} 

यह कंटेनर का एक "सही फिट" करने की कोशिश करता है, खुद को खींच सीमा फिट करने के लिए छवि अनुपात को बनाए रखने। आईई 6 के साथ इसका परीक्षण नहीं किया है।

JSFiddle:http://jsfiddle.net/4zudggou/