DIV

Question

के अंदर छवि का विस्तार करें आकार बदलने के बाद div के समान ऊंचाई रखने के लिए मैं एक छवि का विस्तार कैसे कर सकता हूं? या मैं रंग के साथ छवि द्वारा छोड़ी गई सफेद जगह कैसे भर सकता हूं?

Answer 1

मुझे लगता है कि यह आप अपने वांछित परिणाम मिल जाएगा के लिए एक पृष्ठभूमि रंग:

<style> 
    div { 
    width:50px; 
    height:100px; 
    } 

    div img { 
    height:100%; 
    } 
</style> 
<div> 
    <img src='path/to/img.gif' /> 
</div> 

छवि अब कंटेनर div की ऊंचाई को भरने और उसके पहलू के साथ इसकी चौड़ाई स्केल करेगा अनुपात। यह छवि को कंटेनर div की इच्छित चौड़ाई सीमाओं के पीछे विस्तारित करने का कारण बन सकता है, हालांकि सावधान रहें।

div {background-image: url(path/to/image); background-size: 100%} 

पृष्ठभूमि आकार संपत्ति केवल सफारी और ओपेरा के नए संस्करण में समर्थित है:

Answer 2

सेट वह कंटेनर होता div

Answer 3

वहाँ CSS3 में ऐसा करने का एक तरीका है। इस कोड का प्रयोग

div {background:#000000 url(path/to/image) no-repeat; background-size:100%} 

करेंगे: अन्य ब्राउज़र के लिए, आप सफेद स्थान को पृष्ठभूमि रंग संपत्ति का उपयोग कर एक रंग के साथ छवि के आसपास छोड़ दिया है, तो जैसे भर सकते हैं:

div { 
    background-image: url(path/to/image); 
    background-size: 100%; 
    background-color: #000000; 
    } 

या, आशुलिपि में CSS3 सक्षम ब्राउज़र (नवीनतम ओपेरा, सफारी, और संभवतः फ़ायरफ़ॉक्स) में छवि को खींचने का कारण बनता है। पुराने ब्राउज़र और आईई में निर्दिष्ट पृष्ठभूमि रंग से भरे हुए छवि के चारों ओर व्हाइटस्पेस होगा।