उत्तरदायी छवि फिट पैरेंट कंटेनर

Question

मैं यह पता लगाने की कोशिश कर रहा हूं कि शुद्ध बैनर समाधान है या नहीं, यह सुनिश्चित करने के लिए कि मेरे बैनर में छवि माता-पिता की ऊंचाई से नीचे न हो, लेकिन छवि का अनुपात रखें।

आप एक डेमो देख सकते हैं: http://jsfiddle.net/LkxYU/1/

एचटीएमएल:

<div class="banner_holder"> 
    <img src="http://placekitten.com/g/800/600"/>  
</div> 

सीएसएस:

.banner_holder{ 
    width: 100%; 
    height: 300px; 
    min-height: 200px; 
    position: relative; 
    outline:1px dotted red; 
} 

.banner_holder img{ 
    width: 100%; 
} 

मेरा उद्देश्य छवि हमेशा 100% है, लेकिन 300px नीचे कभी नहीं में है ऊंचाई। इस छवि को कटऑफ का मतलब होगा, लेकिन ठीक thats, मैं सिर्फ अगर वहाँ एक शुद्ध सीएसएस समाधान जानना चाहता हूँ, या मैं jQuery

Answer 1

इसके बजाय, मैं उस छवि एक div के लिए पृष्ठभूमि छवि बना दिया है और दे दिया निम्नलिखित शैलियों:

.banner_holderImage{ 
    height: 100%; 
    position:relative; 
    background: url("http://placekitten.com/g/800/600")no-repeat; 
    background-size: cover; 
    background-position: center; 
} 

यहाँ

है बेला मैं उपयोग कर रहा था: http://jsfiddle.net/MathiasaurusRex/LkxYU/4/

-

<div class="banner_holder"> 
    <div class="banner_holderImage"></div> 
</div> 

: यहाँ पूरा HTML और सीएसएस है

.banner_holder{ 
    width: 100%; 
    height: 300px; 
    min-height: 200px; 
    position: relative; 
    outline:1px dotted red; 
} 

.banner_holderImage{ 
    height: 100%; 
    position:relative; 
    background: url("http://placekitten.com/g/800/600")no-repeat; 
    background-size: cover; 
    background-position: center; 
} 

Answer 2

कोशिश उपयोग करने की आवश्यकता है, तो:

.banner_holder img{ 
height: 100%; 
/* OR */ 
height: inherit; 
} 

Answer 3

उपयोग अधिकतम-ऊंचाई max-

.banner_holder{ 
    width: 200px; 
    height: 300px; 
    position: relative; 
    outline:1px dotted red; 
} 

.banner_holder img{ 
    max-width: 100%; 
    max-height: 100%; 
} 

संपादित करें: जहाँ आप 300px के बारे में कट ऑफ सामान लिखा क्षमा करें, मैं हिस्सा याद आती है :) MathiasaurusRex के जवाब सही है चौड़ाई सुनिश्चित करें कि छवि हमेशा माता पिता div फिट होगा होने के लिए। एक < img> टैग का उपयोग कर के

Answer 4

आपकी छवि अनिवार्य रूप से स्क्रीन आकार के आधार पर अनुपात से बाहर हो जाएगा, क्यों एक पृष्ठभूमि छवि की कोशिश नहीं:

.banner_holder{ 
    width: 100%; 
    height: 300px; 
    min-height: 200px; 
    position: relative; 
    outline:1px dotted red; 
    background: url('http://placekitten.com/g/800/600') center no-repeat; 
    background-size: cover; 
} 

या तुम सिर्फ एक अधिकतम ऊंचाई अपनी छवि को टैग करने के लिए जोड़ सकते हैं:

.banner_holder img{ 
    width: 100%; 
    max-height: 300px; 
}