खिंचाव छवि और चौड़ाई

Question

डिव ऊंचाई की 100% फिट मैं निम्नलिखित सीएसएस

#mydiv{ 
    top: 50px; 
    left: 50px; 
    width: 200px; 
    height: 200px; 
} 

साथ एक div है और मेरे एचटीएमएल इस

<div id = "mydiv"> 
    <img src = "folder/file.jpg" width = "200px" height = "200px"> 
</div> 

मैं अपने वेब छवि चाहते हैं की तरह लग रहा हमेशा एक ही आकार (1: 1 पहलू राशन में) कोई फर्क नहीं पड़ता कि वास्तविक छवि का संकल्प क्या है। अगर मेरी वास्तविक छवि फ़ाइलें वर्ग (1: 1 अनुपात के साथ) हैं तो यह कोई समस्या नहीं है। लेकिन यदि वास्तविक छवि फ़ाइलें वर्ग नहीं हैं तो प्रदर्शित वेब छवि div की ऊंचाई और चौड़ाई (इस मामले में 200px) दोनों के 100% तक फैली हुई है।

मैं अपने डीआईवी में फिट करने के लिए अलग-अलग छवि आकार कैसे प्राप्त करूं?

Answer 1

आप नोटेशन मिश्रण कर रहे हैं। यह होना चाहिए:

<img src="folder/file.jpg" width="200" height="200"> 

(ध्यान दें, कोई पिक्सल)। या:

<img src="folder/file.jpg" style="width: 200px; height: 200px;"> 

शैली विशेषता निम्नलिखित सीएसएस के साथ प्रतिस्थापित किया जा सकता (शैली विशेषता का उपयोग):

#mydiv img { 
    width: 200px; 
    height: 200px; 
} 

या

#mydiv img { 
    width: 100%; 
    height: 100%; 
} 

Answer 2

के बजाय पूर्ण चौड़ाई और ऊंचाई की स्थापना , आप प्रतिशत का उपयोग कर सकते हैं:

#mydiv img { 
    height: 100%; 
    width: 100%; 
} 

Answer 3

या आप सीएसएस में डाल सकते हैं,

<style> 
div#img { 
    background-image: url(“file.png"); 
    color:yellow (this part doesn't matter; 
    height:100%; 
    width:100%; 
} 
</style>