कंटेनर में सबसे बड़ा संभव वर्ग में एक div का आकार बदलें

Question

सीएसएस का उपयोग करके अपने कंटेनर में सबसे बड़ा संभव वर्ग बनने के लिए मैं एक div का आकार कैसे बदल सकता हूं? यदि सीएसएस के साथ यह संभव नहीं है, तो जावास्क्रिप्ट के साथ यह कैसे किया जा सकता है?

यदि कंटेनर में height > width है तो मुझे वर्ग का आकार width x width पर चाहिए। यदि कंटेनर में width > height है तो मुझे आकार का आकार height x height होना चाहिए।

जब कंटेनर के आयाम बदलते हैं तो बच्चे के आयामों को तदनुसार समायोजित करना चाहिए।

मुझे this answer बच्चे के पहलू अनुपात को बनाए रखने के लिए सहायक होने के लिए मिला। यह दृष्टिकोण काम नहीं करता है जब कंटेनर की चौड़ाई ऊंचाई से बड़ी होती है क्योंकि बच्चे निम्न स्निपेट में दिखाए गए माता-पिता को बहता है।

.flex { 
 
    display: flex; 
 
} 
 

 
.wide, 
 
.tall { 
 
    flex: none; 
 
    border: 3px solid red; 
 
} 
 

 
.wide { 
 
    width: 150px; 
 
    height: 100px; 
 
} 
 

 
.tall { 
 
    width: 100px; 
 
    height: 150px; 
 
} 
 

 
div.stretchy-wrapper { 
 
    width: 100%; 
 
    padding-bottom: 100%; 
 
    position: relative; 
 
    background: blue; 
 
} 
 

 
div.stretchy-wrapper>div { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    color: white; 
 
    font-size: 24px; 
 
    text-align: center; 
 
}

<div class="flex"> 
 
    <div class="wide"> 
 
    <div class="stretchy-wrapper"> 
 
     <div>Wide container</div> 
 
    </div> 
 
    </div> 
 
    <div class="tall"> 
 
    <div class="stretchy-wrapper"> 
 
     <div>Tall container</div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

• प्राप्त चौड़ाई और सभी .stretchy-आवरण की ऊंचाई और एक ही नक्शे का उपयोग करने के लिए माता पिता()।
• अब लूप का उपयोग करके माता-पिता को अधिकतम मान असाइन करें।
• फिर $ (विंडो) .resize कॉल resizeDiv फ़ंक्शन जब भी ब्राउज़र विंडो आकार बदलता है।

$(document).ready (function() { 
 
    function resizeDiv() { 
 
    var stretchyWrapper = $(".stretchy-wrapper"), 
 
     sWrapperWidth = stretchyWrapper.map (function() { 
 
     return $(this).width(); 
 
     }), 
 
     sWrapperHeight = stretchyWrapper.map (function() { 
 
     return $(this).height(); 
 
     }), 
 
     container = stretchyWrapper.map (function() { 
 
     return $(this).parent(); 
 
     }); 
 
    
 
    for (var i in container) { 
 
     var maxVal = Math.max (sWrapperWidth[i], sWrapperHeight[i]); 
 
     $(container[i]).css ({"width": maxVal, "height": maxVal}); 
 
    } 
 
    } 
 
    resizeDiv(); 
 
    
 
    $(window).resize (function() { 
 
    resizeDiv(); 
 
    }); 
 
});

.flex { 
 
    display: flex; 
 
} 
 

 
.wide, 
 
.tall { 
 
    flex: none; 
 
    border: 3px solid red; 
 
} 
 

 
.wide { 
 
    width: 150px; 
 
    height: 100px; 
 
} 
 

 
.tall { 
 
    width: 100px; 
 
    height: 150px; 
 
} 
 

 
div.stretchy-wrapper { 
 
    width: 100%; 
 
    padding-bottom: 100%; 
 
    position: relative; 
 
    background: blue; 
 
} 
 

 
div.stretchy-wrapper>div { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    color: white; 
 
    font-size: 24px; 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="flex"> 
 
    <div class="wide"> 
 
    <div class="stretchy-wrapper"> 
 
     <div>Wide container</div> 
 
    </div> 
 
    </div> 
 
    <div class="tall"> 
 
    <div class="stretchy-wrapper"> 
 
     <div>Tall container</div> 
 
    </div> 
 
    </div> 
 
</div>