अधिकतम ऊंचाई वाला बच्चा: 100% माता-पिता से अधिक है

Question

मैं यह समझने की कोशिश कर रहा हूं कि मेरे लिए अप्रत्याशित व्यवहार क्या प्रतीत होता है:

मेरे पास एक कंटेनर के अंदर 100% की अधिकतम ऊंचाई वाला एक तत्व है जो अधिकतम ऊंचाई का भी उपयोग करता है लेकिन, अप्रत्याशित रूप से, बच्चा माता-पिता से अधिक प्रभावित होता है:

टेस्ट केस: http://jsfiddle.net/bq4Wu/16/

.container {  
    background: blue; 
    padding: 10px; 
    max-height: 200px; 
    max-width: 200px; 
}

img { 
    display: block;
    max-height: 100%; 
    max-width: 100%; 
}

हालांकि, यह तय हो गया है, यदि माता-पिता को स्पष्ट ऊंचाई दी गई है:

टेस्ट केस: http://jsfiddle.net/bq4Wu/17/

.container {  
    height: 200px;
}

क्या कोई जानता है कि बच्चा पहले उदाहरण में अपने माता-पिता की अधिकतम ऊंचाई का सम्मान क्यों नहीं करेगा? एक स्पष्ट ऊंचाई की आवश्यकता क्यों है?

Answer 1

जब आप max-heightएक बच्चे के लिए एक प्रतिशत निर्दिष्ट करते हैं , तो यह माता-पिता की वास्तविक ऊंचाई का एक प्रतिशत होता है, न कि माता-पिता के लिए max-height, पर्याप्त रूप से पर्याप्त । वही लागू होता है max-width।

इसलिए, जब आप माता-पिता के बारे में कोई स्पष्ट ऊँचाई निर्दिष्ट नहीं करते हैं, तब बच्चे की max-heightगणना के लिए आधार की ऊँचाई नहीं होती है, इसलिए यह max-heightगणना करता है none, जिससे बच्चा यथासंभव लंबा हो सके। बच्चे पर अभिनय करने वाला एकमात्र अन्य बाधा अब max-widthउसके माता-पिता का है, और चूँकि छवि अपने आप में अधिक चौड़ी है, इसलिए यह कंटेनर की ऊँचाई को नीचे की ओर ले जाता है, ताकि समग्र रूप से यथासंभव बड़े होने के बावजूद इसके पहलू अनुपात को बनाए रखा जा सके।

जब आप माता-पिता के लिए एक स्पष्ट ऊंचाई निर्दिष्ट करते हैं, तो बच्चा जानता है कि यह उस स्पष्ट ऊंचाई का अधिकतम 100% होना चाहिए। यह इसे माता-पिता की ऊंचाई के लिए विवश करने की अनुमति देता है (जबकि अभी भी इसके पहलू अनुपात को बनाए रखना)।

Comments

यह एक उपयोगी व्याख्या है, विशेष रूप से मेरे मित्र के इनपुट के साथ मिश्रित: "अधिकतम ऊंचाई: 100% (अधिकतम) का बच्चा: 100% (माता-पिता) = 0 - यही कारण है कि आपका बच्चा अपने मूल मूल्य का सम्मान नहीं कर रहा है"।

— इम्किर

मुझे यकीन नहीं है कि कौन सा उत्तर स्वीकार करना है - यह 'क्यों' का जवाब देता है।

— इम्केर

मैंने केवल 'क्यों' का उत्तर दिया क्योंकि मुझे यकीन नहीं है कि आपका लक्ष्य क्या है क्योंकि यह स्पष्ट रूप से उल्लिखित नहीं है। हो सकता है कि अगर आप इस पर विस्तार से बात करते हैं, तो मैं इसका जवाब दे सकता हूं।

— BoltClock

इसे स्वीकार किया जाता है क्योंकि यह मेरे वास्तविक प्रश्न का उत्तर देता है, धन्यवाद। कृपया ध्यान दें नीचे दिए गए डैनियल के जवाब में एक प्रस्ताव है।

— Iamkeir

मेरे मामले display: flex; flex-direction: columnमें समस्या को हल करने और मेरे द्वारा वांछित स्क्रॉलबार जोड़ा गया।

— xdevs23

Answer 2

.container {
  background: blue;
  padding: 10px;
  max-height: 200px;
  max-width: 200px;
  float: left;
  margin-right: 20px;
}

.img1 {
  display: block;
  max-height: 100%;
  max-width: 100%;
}

.img2 {
  display: block;
  max-height: inherit;
  max-width: inherit;
}

<!-- example 1  -->
<div class="container">
  <img class='img1' src="http://via.placeholder.com/350x450" />
</div>

<!-- example 2  -->

<div class="container">
  <img class='img2' src="http://via.placeholder.com/350x450" />
</div>

मैं थोड़ा खेलता रहा। फ़ायरफ़ॉक्स में एक बड़ी छवि पर, मुझे विरासत में मिली संपत्ति के मूल्य का उपयोग करने के साथ एक अच्छा परिणाम मिला। क्या इससे आपको मदद मिलेगी?

.container {
    background: blue;
    padding: 10px;
    max-height: 100px;
    max-width: 100px;
    text-align:center;
}

img {
    max-height: inherit;
    max-width: inherit;
}

Comments

मुझे यकीन नहीं है कि कौन सा उत्तर स्वीकार करना है - यह 'फिक्स' का जवाब देता है।

— इम्केर

क्यों का जवाब देने के लिए @BoltClock को स्वीकार किया गया, लेकिन एक प्रस्ताव देने के लिए धन्यवाद।

— Iamkeir

@BoltClock के अलावा, मेरा जवाब बिल्कुल वही कर रहा है जो वह कहता है। CSS सिर्फ कंप्यूटर को बता रहा है कि किसी तत्व को कैसे संभाला जाए, लेकिन गणना के बाद इसे सभी मानों को रेंडर करने के लिए मूल आवश्यक मानों तक सीमांकित किया जाएगा, जैसे ऊंचाई, चौड़ाई, रंग, निर्देशांक, ... विरासत में मिली संपत्ति को img बता रहे हैं माता-पिता के "गणना" मूल्य को लें। तो आपको अधिकतम ऊंचाई और अधिकतम-चौड़ाई सीएसएस गुणों में ऊंचाई और चौड़ाई के लिए गणना किए गए मान मिलते हैं।

— डैनियल

जब max:height: 100%एक निश्चित ऊंचाई के बजाय यह काम नहीं करता है : jsfiddle.net/umbreak/n6czk9xt/1

— Didac Montero

मैं चौड़ाई और ऊँचाई को घोषित नहीं कर सकता क्योंकि निश्चित रूप से मेरा लेआउट उत्तरदायी है dispaly: flex;। मैंने एक नया थ्रेड खोला: मैंने नया थ्रेड खोला: stackoverflow.com/questions/29732391/… हालाँकि, इससे भी बदतर स्थिति में मैं img वास्तविक चौड़ाई और ऊँचाई लाने के लिए Jquery का उपयोग कर सकता हूं और उन्हें पैरेंट इमेज के डिव में सेट कर सकता हूं।

— दीदाक मोंटेरो

Answer 3

मुझे यहाँ एक समाधान मिला: http://www.sitepoint.com/maintain-image-aspect-ratios-responsive-web-design/

चाल संभव है क्योंकि यह एक तत्व के WIDTH और PADDING-BOTTOM के बीच एक संबंध है। इसलिए:

माता-पिता:

container {
  height: 0;
  padding-bottom: 66%; /* for a 4:3 container size */
  }

बच्चे ( चौड़ाई से संबंधित सभी सीएसएस को हटा दें) , अर्थात चौड़ाई: 100%):

img {
  max-height: 100%;
  max-width: 100%;
  position: absolute;     
  display:block;
  margin:0 auto; /* center */
  left:0;        /* center */
  right:0;       /* center */
  }

Answer 4

आप प्रॉपर्टी ऑब्जेक्ट-फिट का उपयोग कर सकते हैं

.cover {
    object-fit: cover;
    width: 150px;
    height: 100px;
}

जैसा यहाँ सुझाया गया है

इस संपत्ति का पूरा विवरणDev.Opera में क्रिस मिल्स द्वारा

और एक बेहतर भी सीएसएस-ट्रिक्स में

इसमें समर्थित है

• क्रोम 31+
• सफारी 7.1+
• फ़ायरफ़ॉक्स 36+
• ओपेरा 26+
• Android 4.4.4+
• iOS 8+

मैंने बस जाँच की कि विवाल्डी और क्रोमियम इसका समर्थन करते हैं (यहाँ कोई आश्चर्य नहीं)

यह वर्तमान में IE पर समर्थित नहीं है, लेकिन ... कौन परवाह करता है ? इसके अलावा, iOS ऑब्जेक्ट-फिट का समर्थन करता है, लेकिन ऑब्जेक्ट-पोज़िशन नहीं, लेकिन यह जल्द ही होगा।

Comments

अच्छा विकल्प! मैं कल्पना करता हूं कि फ्लेक्स-बॉक्स संभावित रूप से भी मदद कर सकता है, अगर IE में अनुग्रहपूर्ण गिरावट स्वीकार्य है।

— आइमकेयर

Answer 5

इस प्रश्न के डुप्लिकेट के रूप में हाल ही में खोले गए प्रश्न के लिए समाधान यहां दिया गया है । <img>टैग माता पिता की अधिकतम ऊंचाई से अधिक था <div>।

टूटी: बेला

काम करना: फील करना

इस मामले में, display:flex2 मूल <div>टैग जोड़ने का जवाब था

Answer 6

अधिकतम ऊंचाई के साथ जाने के बजाय: 100% / 100%, सभी स्थान को भरने का एक वैकल्पिक तरीका उपयोग किया जाएगा position: absolute शीर्ष / नीचे / बाएं / दाएं सेट के साथ 0 ।

दूसरे शब्दों में, HTML निम्नलिखित की तरह दिखेगा:

<div class="flex-content">
  <div class="scrollable-content-wrapper">
    <div class="scrollable-content">
      1, 2, 3
    </div>
   </div>
</div>

.flex-content {
  flex-grow: 1;
  position: relative;
  width: 100%;
  height: 100%;
}

.scrollable-content-wrapper {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: auto;
}

.scrollable-content {
}

आप कोडेक्सबॉक्स में एक जीवंत उदाहरण देख सकते हैं - सीएसएस फ्लेक्स / ग्रिड के भीतर अतिप्रवाह

Answer 7

हो सकता है कि कोई और आपकी समस्या के पीछे के कारणों की व्याख्या कर सकता है, लेकिन आप इसे कंटेनर की ऊंचाई निर्दिष्ट करके और फिर छवि की ऊंचाई 100% करने के लिए निर्धारित करके हल कर सकते हैं। यह महत्वपूर्ण है कि widthछवि पहले दिखाई दे height।

<html>
    <head>
        <style>
            .container {  
                background: blue; 
                padding: 10px;
                height: 100%;
                max-height: 200px; 
                max-width: 300px; 
            }

            .container img {
                width: 100%;
                height: 100%
            }
        </style>
    </head>
    <body>
        <div class="container">
            <img src="http://placekitten.com/400/500" />
        </div>
    </body>
</html>

Comments

यदि वे चाहते हैं कि यदि कंटेनर 200x200 से छोटा है, तो कंटेनर छोटा हो जाता है, हां, इसे न्यूनतम ऊंचाई / अधिकतम-ऊंचाई के साथ करना होगा।

— साइमन

Answer 8

निकटतम मैं इस के लिए मिल सकता है यह उदाहरण है:

http://jsfiddle.net/YRFJQ/1/

या

.container {  
  background: blue; 
  border: 10px solid blue; 
  max-height: 200px; 
  max-width: 200px; 
  overflow:hidden;
  box-sizing:border-box;
}

img { 
  display: block;
  max-height: 100%; 
  max-width: 100%; 
}

मुख्य समस्या यह है कि ऊंचाई कंटेनरों की ऊंचाई का प्रतिशत लेती है, इसलिए यह मूल कंटेनर में स्पष्ट रूप से सेट ऊंचाई की तलाश में है, न कि यह अधिकतम ऊंचाई है।

एकमात्र तरीका यह है कि कुछ हद तक मैं देख सकता हूँ कि ऊपर की ओर जहाँ आप ओवरफ्लो को छिपा सकते हैं, लेकिन तब पैडिंग अभी भी छवि को प्रवाहित करने के लिए दृश्यमान स्थान के रूप में कार्य करता है, और इसलिए इसके बजाय एक ठोस सीमा के साथ काम करता है (और तब सीमा-बॉक्स को जोड़ने के लिए इसे 200px बनाने के लिए यदि वह चौड़ाई है जिसकी आपको आवश्यकता है)

यकीन नहीं है कि अगर आप इसके लिए इसकी आवश्यकता के साथ फिट होंगे, लेकिन सबसे अच्छा मुझे मिल सकता है।

Comments

दुर्भाग्य से छवि को क्रॉप करना आदर्श नहीं है। हालांकि आपके इनपुट के लिए धन्यवाद।

— इम्किर

Answer 9

एक अच्छा समाधान यह है कि माता-पिता के लिए ऊँचाई का उपयोग न करें और इसे केवल बच्चे पर व्यू पोर्ट के साथ उपयोग करें :

फिडेल उदाहरण: https://jsfiddle.net/voan3v13/1/

body, html {
  width: 100%;
  height: 100%;
}
.parent {
  width: 400px;
  background: green;
}

.child {
  max-height: 40vh;
  background: blue;
  overflow-y: scroll;
}

Answer 10

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

.container {
    background: blue;
    padding: 10px;
}

img {
    display: block;
    max-height: 200px;
    max-width: 200px;
}

Comments

अच्छा लगा, मुझे यह पसंद है।

— 22

Answer 11

आपके कंटेनर की ऊंचाई नहीं है।

ऊंचाई जोड़ें: 200 पीएक्स;

कंटेनरों में सीएसएस और किटी अंदर रहेंगे।

Comments

इनपुट के लिए धन्यवाद, लेकिन मैंने इसे ओपी में पहचान लिया।

— इम्किर