एक छवि के लिए मजबूर फिट और पहलू अनुपात

Question

रखने मैं अपने कंटेनर की 100% चौड़ाई को भरने के लिए एक छवि चाहते हैं, और मैं इसे एक अधिकतम-ऊँचाइ संपत्ति यह करने के लिए सेट करना चाहते हैं, यह सब पहलू अनुपात रखने के लिए अनुमति देता है, लेकिन करने के लिए छवि का कोई भी हिस्सा खोना।

img { 
    max-height:200px; 
    width:100%; 
} 

मैं एक ऐसी ही बात background-size संपत्ति के साथ किया जा सकता है पता है, लेकिन मैं एक इनलाइन <img> टैग में यह करना चाहते हैं।

मैं कैसे इस सीएसएस का उपयोग कर प्राप्त कर सकते थे के किसी भी विचार? या जावास्क्रिप्ट?

Answer 1

आप CSS3 के object-fit प्रयास करें, और ब्राउज़र समर्थन tables देख सकते हैं।

CSS3 object-fit/object-position को निर्दिष्ट कैसे एक वस्तु (छवि या वीडियो) अपने बॉक्स के अंदर फिट चाहिए की विधि। वस्तु फिट विकल्पों में शामिल हैं (अतिप्रवाह बॉक्स लेकिन अनुपात बनाए रखता है) "में" (पहलू अनुपात के अनुसार फिट), "भरने" (हिस्सों को भरने के लिए वस्तु) और "कवर", वस्तु-स्थिति वस्तु पुनर्निर्धारित होने की अनुमति देता है, जहां पृष्ठभूमि-छवि की तरह करता है।

JSFIDDLE DEMO

.container { 
 
    width: 200px; /*any size*/ 
 
    height: 200px; /*any size*/ 
 
} 
 

 
.object-fit-cover { 
 
    width: 100%; 
 
    height: 100%; 
 
    object-fit: cover; /*magic*/ 
 
}

<div class="container"> 
 
    <img class="object-fit-cover" src="https://i.stack.imgur.com/UJ3pb.jpg"> 
 
</div>

---

संबंधित जानकारी:

• Exploring object-fit ★ Mozilla Hacks

• Polyfill for CSS object-fit property