छवि सीएसएस

Question

पर खिंचाव से बचें मैं अपने div में एक छवि प्रस्तुत कर रहा हूँ। मैं अपनी छवि को खींचने से बचना चाहता हूं।

div { 
      height: 300px; 
      width: 300px; 
     } 
    img { 
      min-width: 300px; 
      min-height: 300px; 
      max-height: 300px; 
     } 

मेरी समस्या यह है कि मेरी छवि चौड़ाई पर खड़ी है। मैं सामान्य चौड़ाई बनना चाहता हूं, भले ही कुछ छवि याद आएगी।

div { 
      height: 300px; 
      width: 300px; 
      overflow: hidden; 
     } 
    img { 
      height: 300px 
      max-width: none; 
      min-width: 300px; 
     } 

मैंने इसे हल किया।

Answer 1

छवि को div पृष्ठभूमि के रूप में रखें यदि आप सबसे आसान तरीका खींचने से बचाना चाहते हैं (फिर भी मूल चौड़ाई को बनाए रखें)।

Answer 2

उपयोग max-width बजाय min-width, और सिर्फ सेट height300px (या केवल max-height उपयोग करें)।

Answer 3

आप div की चौड़ाई के बाहर छवि के किसी हिस्से को छिपाने के लिए overflow:hidden का उपयोग कर सकते हैं।

div { 
     height: 300px; 
     width: 300px; 
     overflow: hidden; 
    } 
img { 
     /*min-width: 300px;*/ 
     height: 300px; 
    } 

Answer 4

मैं न्यूनतम ऊंचाई और अधिकतम ऊंचाई निर्धारित करना भूल जाऊंगा। बस ऊंचाई को 300 पिक्सल सेट करें और div टैग पर एक अतिप्रवाह छिपाएं। इस तरह से कोई फर्क नहीं पड़ता कि छवि का आकार हमेशा अनुपात में रहेगा और कभी भी आपके div टैग की सीमाओं के बाहर नहीं जायेगा।

div { height: 300px; width: 300px; overflow: hidden; } 
img { height: 300px; }