पैरेंट डिव की छवि चौड़ाई 100% करें, लेकिन अपनी स्वयं की चौड़ाई से अधिक नहीं

Question

मैं एक छवि प्राप्त करने की कोशिश कर रहा हूं (गतिशील रूप से रखा गया है, आयामों पर कोई प्रतिबंध नहीं है) अपने माता-पिता के रूप में व्यापक होने के लिए, लेकिन केवल तब तक जब तक कि चौड़ाई 100% से कम नहीं हो जाती। मैंने बिना किसी लाभ के यह कोशिश की है:

img {
    width: 100%;
    height: auto;
    max-width: 100%;
}

इन चित्रों में से कई अपने माता-पिता की तुलना में व्यापक हैं, यही कारण है कि मैं उनके अनुसार आकार बदलना चाहूंगा, लेकिन जब एक छोटी छवि वहां पॉप हो जाती है और अपने सामान्य आयामों से परे हो जाती है, तो यह वास्तव में भयानक लगता है। ऐसा करने का कोई रास्ता नहीं है?

Comments

यदि आप केवल निर्दिष्ट करते हैं तो क्या होता है max-width: 100%?

— फ्योदोर सोइकिन

@ फ्योडोर सोइकिन - एक जवाब के रूप में दें और मैं आपको वोट दूंगा।

— गर्ट ग्रेन्डर

यह विचार करना अच्छा होगा कि कौन से ब्राउज़र अधिकतम-चौड़ाई का समर्थन करते हैं, हालांकि।

— kbrimington

kbrimington तालिका के लिए एक अच्छा बिंदु लाती है। के अनुसार reference.sitepoint.com/css/max-width#compatibilitysection IE8 के कार्यान्वयन त्रुटिपूर्ण है।

— अल्फांसो

Answer 1

बस max-width: 100%अकेले निर्दिष्ट करें , यह करना चाहिए।

Comments

क्रोमियम केवल संदर्भ की परवाह किए बिना इसे 100% पर छोड़ देता है। शायद मुझे बीटा सॉफ़्टवेयर पर अपने काम को लगातार देखना बंद कर देना चाहिए। धन्यवाद!

— अल्फांसो

अधिकतम-चौड़ाई का उपयोग किए बिना आप यह कैसे करते हैं: 100%। रिएक्ट-नेटिव में, प्रतिशत का उपयोग करना संभव नहीं है।

— क्रोल्स्बी

@ क्रॉस्बी आप प्रतिक्रिया-मूल में प्रतिशत का उपयोग कर सकते हैं, लेकिन स्ट्रिंग मूल्य के साथ, इस '100%' की तरह

— राफेल होवेस्पियन

Answer 2

इस पोस्ट को Google खोज पर मिला, और इसने @jwal उत्तर के लिए मेरी समस्या को हल कर दिया, लेकिन मैंने उनके समाधान के लिए एक जोड़ दिया।

img.content.x700 {
  width: auto !important; /*override the width below*/
  width: 100%;
  max-width: 678px;
  float: left;
  clear: both;
}

ऊपर के साथ मैंने कंटेंट कंटेनर के आयामों की अधिकतम-चौड़ाई को बदल दिया, जिसमें मेरी छवि है। इस मामले में यह है: कंटेनर चौड़ाई - पैडिंग - बोर्डर = अधिकतम चौड़ाई।

इस तरह मेरी छवि युक्त div से बाहर नहीं निकलेगी, और मैं अभी भी सामग्री div के भीतर छवि को फ्लोट कर सकता हूं।

मैंने IE 9, फ़ायरफ़ॉक्स 18.0.2 और क्रोम 25.0.1364.97, सफारी आईओएस में परीक्षण किया है और काम करने लगता है।

अतिरिक्त: मैंने इसे 678px (अधिकतम चौड़ाई) पर प्रदर्शित 1024px चौड़े चित्र, और 500px चौड़े चित्र 500px (चित्र की चौड़ाई) पर प्रदर्शित किया।

Comments

width:auto !important;मेरे लिए IE11 में एक समस्या का उपयोग करना जहां छवि उसके कंटेनर से बड़ी होगी और IE11 छवि को स्केलिंग नहीं कर रही है। imgचयनकर्ता में इसे सेट करने से IE11 में समस्या हल हो गई। हालांकि width:100%;अन्य नियम के बिना सेटिंग IE11 में कुछ नहीं किया। तो "ओवरराइड" को छवि के लिए इसके कंटेनर के आकार को नीचे करने के लिए शामिल किया जाना है।

— 22

Answer 3

100% की चौड़ाई सेट करना उस div की पूरी चौड़ाई है, जिसमें मूल पूर्ण-आकार की छवि नहीं है। जावास्क्रिप्ट या कुछ अन्य स्क्रिप्टिंग भाषा के बिना ऐसा करने का कोई तरीका नहीं है जो छवि को माप सकता है। यदि आपके पास div की निश्चित चौड़ाई या निश्चित ऊँचाई हो सकती है (जैसे 200px चौड़ी) तो छवि को भरने के लिए सीमा देना बहुत कठिन नहीं होना चाहिए । लेकिन अगर आप 20x20 पिक्सेल की छवि को 200x300 पिक्सेल के बॉक्स में रखते हैं, तो यह अभी भी विकृत होगा।

Comments

जब भी संभव हो एक काम का उदाहरण प्रदान करें। यह सिफारिश की है। :)

— bhb

Answer 4

लाइन स्टाइल में - यह मेरे लिए हर बार काम करता है

<div class="imgWrapper">
    <img src="/theImg.jpg" style="max-width: 100%">
</div>

Answer 5

आपको अधिकतम चौड़ाई निर्धारित करनी चाहिए और यदि आप चाहें तो किसी एक पक्ष पर कुछ पैडिंग भी सेट कर सकते हैं। मेरे मामले में अधिकतम-चौड़ाई: 100% अच्छी थी लेकिन स्क्रीन के अंत में छवि ठीक थी।

  max-width: 100%;
  padding-right: 30px;
  /*add more paddings if needed*/

Answer 6

मुझे भी यही समस्या आ रही थी, लेकिन मैंने अपने CSS में ऊँचाई मान को ऑटो में सेट किया और उसने मेरी समस्या को ठीक कर दिया। इसके अलावा, प्रदर्शन संपत्ति करना मत भूलना।

  #image {
      height: auto;
      width: auto;
      max-height: 550px;
      max-width: 1200px;
      margin-left: auto;
      margin-right: auto;
      display: block;
 }  

Comments

बस एक फीई..आप ऊंचाई को हटा सकते हैं: ऑटो और चौड़ाई: ऑटो। अधिकतम ऊंचाई और अधिकतम चौड़ाई एक ही बात है।

— डेबी कुर्थ

Answer 7

मुझे एक उत्तर मिला जो मेरे लिए काम करता है और निम्नलिखित लिंक में पाया जा सकता है:

सीमित चौड़ाई वाले माता-पिता में पूर्ण चौड़ाई वाले कंटेनर

Answer 8

अगर छवि माता-पिता से छोटी है ...

.img_100 {
  width: 100%;
}

Answer 9

मैं संपत्ति का उपयोग करूंगा display: table-cell

यहाँ लिंक है