Zmiana rozmiaru div na największy możliwy kwadrat w kontenerze

Question

Jak zmienić rozmiar div, aby był największym możliwym kwadratem w jego kontenerze przy użyciu CSS? Jeśli nie jest to możliwe z CSS, jak to zrobić z JavaScript?

Jeśli pojemnik ma height > width, chciałbym rozmiar kwadratu do width x width. Jeśli kontener ma numer width > height, chciałbym, aby rozmiar kwadratu wynosił height x height.

Po zmianie wymiarów kontenera wymiary dziecka powinny odpowiednio się dostosować.

Znalazłem this answer, aby pomóc w utrzymaniu proporcji dziecka. Takie podejście nie działa, gdy szerokość kontenera jest większa niż wysokość, ponieważ dziecko przepełnia element macierzysty, jak pokazano w poniższym fragmencie.

.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

• Get szerokość i wysokość wszystkich .stretchy-wrapper i rodzicem tej samej używając mapy().
• Teraz za pomocą pętli for przypisz do niej wartość nadrzędną.
• Następnie $ (window) .resize wywołuje funkcję resizeDiv, gdy zmienia się rozmiar okna przeglądarki.

$(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>