एचटीएमएल आईएमजी टैग

Question

का उपयोग कर पहलू अनुपात को बनाए रखने के लिए कैसे मैं अपने आवेदन में एक फोटो दिखाने के लिए एचटीएमएल के एक आईएमजी टैग का उपयोग कर रहा हूं। मैंने इसकी ऊंचाई और चौड़ाई विशेषता दोनों को 64 पर सेट कर दी है। मुझे 64x64 के रूप में किसी भी छवि रिज़ॉल्यूशन (उदा। 256x256, 1024x768, 500x400, 205x246, आदि) दिखाने की आवश्यकता है। लेकिन एक आईएमजी टैग की ऊंचाई और चौड़ाई विशेषताओं को 64 तक सेट करके, यह पहलू अनुपात को बनाए रखता नहीं है, इसलिए छवि विकृत दिखती है।

आपके संदर्भ के लिए मेरे सटीक कोड है:

<img src="Runtime Path to photo" border="1" height="64" width="64"> 

Answer 1

लपेटें आयाम 64x64 के साथ एक div में छवि और छवि के लिए width: inherit सेट:

<div style="width: 64px; height: 64px;"> 
    <img src="Runtime path" style="width: inherit" /> 
</div> 

Answer 2

ऊंचाई और चौड़ाई सेट न करें। एक या दूसरे का प्रयोग करें और सही पहलू अनुपात बनाए रखा जाएगा।

.widthSet { 
 
    max-width: 100px; 
 
} 
 

 
.heightSet { 
 
    max-height: 100px; 
 
}

<img src="http://placehold.it/200x250" /> 
 

 
<img src="http://placehold.it/200x250" width="64" /> 
 

 
<img src="http://placehold.it/200x250" height="64" /> 
 

 
<img src="http://placehold.it/200x250" class="widthSet" /> 
 

 
<img src="http://placehold.it/200x250" class="heightSet" />

Answer 3

तो आपको एक अलग सीएसएस फ़ाइल का उपयोग नहीं करते क्यों ऊंचाई और छवि को प्रदर्शित करना चाहते की चौड़ाई बनाए रखने के लिए? इस तरह, आप जरूरी चौड़ाई और ऊंचाई प्रदान कर सकते हैं।

जैसे:

 image { 
     width: 64px; 
     height: 64px; 
     } 

Answer 4

<img src="Runtime Path to photo" style="border: 1px solid #000; max-width:64px; max-height:64px;"> 

Answer 5

सेट width और auto के लिए छवियों के height, लेकिन सीमित कर दोनों max-width और max-height:

img { 
    max-width:64px; 
    max-height:64px; 
    width:auto; 
    height:auto; 
} 

Fiddle

यदि आप 64x64px "फ्रेम" में मनमाने ढंग से आकार की छवियां प्रदर्शित करना चाहते हैं, तो आप इनलाइन-ब्लॉक रैपर का उपयोग कर सकते हैं और उनके लिए पोजिशनिंग कर सकते हैं, जैसे in this fiddle।

Answer 6

वांछित पहलू अनुपात को बनाए रखते हुए बॉक्स में फिट होने वाले सबसे बड़े संभावित आकार में छवि को स्केल करने वाली कोई भी विधि स्केल नहीं करती है।

यह आईएमजी टैग (कम से कम जावास्क्रिप्ट का एक सा बिना नहीं) के साथ नहीं किया जा सकता है, लेकिन यह किया जा सकता है इस प्रकार है:

<div style="background:center no-repeat url(...);background-size:contain;width:...;height:..."></div> 

Answer 7

यहाँ नमूना एक

div{ 
 
    width: 200px; 
 
    height:200px; 
 
    border:solid 
 
} 
 

 
img{ 
 
    width: 100%; 
 
    height: 100%; 
 
    object-fit: contain; 
 
    }

<div> 
 
    <img src="https://upload.wikimedia.org/wikipedia/meta/0/08/Wikipedia-logo-v2_1x.png"> 
 
</div>

है

[HTML/आईई: खिंचाव छवि फिट करने के लिए, पक्षानुपात बनाए रखने] का