HTML IMG टैग का उपयोग करके पहलू अनुपात कैसे बनाए रखें

Question

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

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

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

Comments

HTML / IE

— जोनाथन रेइनहार्ट

Chridam, यह लंबे समय से है जब मैंने यह सवाल पूछा था। मैंने उस कंपनी को छोड़ दिया है जहाँ मैं इस मुद्दे के लिए काम कर रहा था। मैं सुझाए गए समाधानों की कोशिश नहीं कर सकता था क्योंकि मैं उस समय की समय सीमा को पूरा करने के लिए अन्य प्राथमिकताओं पर काम कर रहा था। मुझे इस पर और प्रगति करने का मौका नहीं मिला।

— सुनील कुमार

Answer 1

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

.widthSet {
    max-width: 64px;
}

.heightSet {
    max-height: 64px;
}

<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" />

Comments

... लेकिन क्या होगा यदि आप ऊंचाई और चौड़ाई दोनों को ठीक करना चाहते हैं?

— फतहोकू

यह गतिशील अनुप्रयोगों के लिए कोई मतलब नहीं है। यह ज्ञात नहीं है कि चौड़ाई या ऊंचाई 64px पर होगी, क्योंकि यह छवि के अनुपात पर निर्भर करता है। यह उत्कीर्ण प्रतिक्रिया क्यों है?

— कोइनिग्सबर्ग

@ यह प्रश्न निश्चित चौड़ाई और / या ऊंचाई के चित्रों के बारे में था। जवाबदेही प्रश्न की आवश्यकता नहीं थी।

— शलजम

आकार तय हो गई है, पहलू अनुपात नहीं है, के रूप में प्रश्न के बारे में विशेष रूप से किया गया था किसी भी की छवि किसी भी संकल्प। जिसमें 64x64 से छोटे संकल्प शामिल हैं।

— कोइनिग्सबर्ग

Answer 2

यहाँ नमूना एक है

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>

Comments

इस समाधान का उपयोग करने के इच्छुक लोगों के लिए बस एक नोट: ऑब्जेक्ट-फिट ब्राउज़र द्वारा बहुत अच्छी तरह से समर्थित नहीं है। यह IE या एज द्वारा समर्थित नहीं है। स्रोत: caniuse.com/#feat=object-fit

— सीन डावसन

अब एज 16+ पर समर्थित, तालिका देखें: w3schools.com/css/css3_object-fit.asp

— एडी

Answer 3

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

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

बेला

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

Comments

मूल आकार से परे नहीं होगा, केवल मूल आकार से नीचे।

— कोएनिग्सबर्ग

Answer 4

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

Comments

यह सही समाधान है क्योंकि यह छवि के उन्मुखीकरण से स्वतंत्र है। 3r404404 के समाधान के लिए आवश्यक है कि आप यह जान लें कि क्या छवि लम्बी है या इसके विपरीत है।

— devios1

भी सेट widthऔर heightकरने के लिए auto।

— महमूदवक्स

ऊंचाई और चौड़ाई दोनों को कम करने के लिए सही समाधान।

— पवन कुमार

एक छवि इसके द्वारा ठीक से प्रतिबंधित होगी , लेकिन इसके मूल आकार से परे नहीं। हालांकि यह पहले से तय नहीं है कि दोनों में से कौन ओपी चाहता था।

— कोइनिग्सबर्ग

Answer 5

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

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

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

Comments

हाँ। टैग के style="background: url('_'); background-size: cover width:_px height:_px"लिए उपयोग करें <img>।

— उज्जवल सिंह

धन्यवाद, @ उज्जवलसिंह वास्तव में, हमें छवि आकार को अधिकतम संभव करने के लिए अधिकतम करने की आवश्यकता coverनहीं containहै। contain"लेटरबॉक्सिंग" की ओर जाता है।

— Ortwin Gentz

Answer 6

object-fit: containHtml के css में विशेषता का उपयोग करें img।

Answer 7

div64x64 आयामों के साथ छवि को लपेटें और छवि पर सेट width: inheritकरें:

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

Answer 8

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

उदाहरण के लिए:

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

Answer 9

इसे इस्तेमाल करे:

<img src="Runtime Path to photo" border="1" height="64" width="64" object-fit="cover">

ऑब्जेक्ट-फिट = "कवर" जोड़ना छवि को पहलू अनुपात को खोए बिना स्थान को ऊपर उठाने के लिए मजबूर करेगा।