छवियों का आकार बदलें, अनुपात रखते हुए, एचटीएमएल?

Question

मैं एक div में फिट करने के लिए एक पृष्ठभूमि तस्वीर का आकार बदलने की कोशिश कर रहा हूँ। मेरी समस्या यह है कि मैं चाहता हूं कि छवि div की ऊंचाई फिट करे और अनुपात रखें। उदाहरण के लिए, मेरे पास एक div है जो मैं नहीं चाहता कि यह स्क्रीन की चौड़ाई आगे बढ़े (स्क्रॉलिंग बार को दिखने से रोकने के लिए) और जिस छवि का मैं उपयोग करना चाहता हूं वह 1024px X 400px है। अगर मैं छवि की ऊंचाई फिट करने की कोशिश करता हूं, तो यह चौड़ाई को भी फिट करने के लिए मजबूर करेगा और यह अनुपात खो देगा। अगर छवि के कुछ हिस्सों को नहीं दिखाया जाता है तो मुझे परवाह नहीं है। वास्तव में, मैं यही करना चाहता हूं।
मुझे किस टैग का उपयोग करने की आवश्यकता है? एचटीएमएल 5 या सीएसएस

Answer 1

उपयोग सीएसएस background-size: cover;<div>, या background-size: auto 100%; को भरने के लिए अगर आप सिर्फ ऊंचाई मैच के लिए चाहते हैं और कोई परवाह नहीं है अगर पक्षों खत्म या प्रवाह के तहत:

html, 
 
body { 
 
    position: relative; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
div { 
 
    background-image: url(https://placebear.com/1024/400.jpg); 
 
    display: inline-block; 
 
    background-repeat: no-repeat; 
 
    border: 1px solid black; 
 
} 
 

 
.cover { 
 
    background-size: cover; 
 
} 
 

 
.center { 
 
    background-position: center; 
 
} 
 

 
.height { 
 
    background-size: auto 100%; 
 
}

<h1>Unstyled</h1> 
 
<div style="width: 50px; height: 200px"></div> 
 
<div style="width: 200px; height: 50px"></div> 
 
<div style="width: 125px; height: 125px"></div> 
 

 
<h1>Un-centered</h1> 
 
<h2>Cover</h2> 
 
<div class="cover" style="width: 50px; height: 200px"></div> 
 
<div class="cover" style="width: 200px; height: 50px"></div> 
 
<div class="cover" style="width: 125px; height: 125px"></div> 
 

 
<h2>100% Height</h2> 
 
<div class="height" style="width: 50px; height: 200px"></div> 
 
<div class="height" style="width: 200px; height: 50px"></div> 
 
<div class="height" style="width: 125px; height: 125px"></div> 
 

 
<h1>Centered</h1> 
 
<h2>Cover</h2> 
 
<div class="cover center" style="width: 50px; height: 200px"></div> 
 
<div class="cover center" style="width: 200px; height: 50px"></div> 
 
<div class="cover center" style="width: 125px; height: 125px"></div> 
 

 
<h2>100% Height</h2> 
 
<div class="height center" style="width: 50px; height: 200px"></div> 
 
<div class="height center" style="width: 200px; height: 50px"></div> 
 
<div class="height center" style="width: 125px; height: 125px"></div>

इसके अलावा, यदि आप छवि को फसल करना चाहते हैं तो background-position: center; का उपयोग करें ताकि केंद्र हमेशा शीर्ष-बाएं की बजाय फोकस हो।

Answer 2

आप अपने अनुपात सीमा थोड़ा कम कर सकते हैं, तो आप भी उपयोग कर सकते हैं:

img { 
    width: 100vw; 
    height: 100vh; 
    max-width: 100%; 
    max-height: 100%; 
}