Высота 100%, если высокий, ширина 100%, если широкий

Question

Мой img генерирует случайные изображения случайного размера, иногда высокие, иногда широкие. Как сделать так, чтобы img никогда не был больше или меньше родительского контейнера? Высота 100%, если высокая, ширина 100%, если ширина.

.image-container{
width: 75rem;
height: 50rem;
}

/**this does not work**/
img{
    max-width:100%;
    max-height:100%;
}

Answer 1

Вам понадобится немного JavaScript, чтобы проверить соотношение ваших изображений (если они альбомные или портретные), прежде чем вы сможете выбрать высоту или ширину равными 100%.

window.onload = function() {
    let images = document.querySelectorAll("img");
    for ( let i = 0; i < images.length; i++ ) {
        images[i].width <= images[i].height ? images[i].style.height = "100%" : images[i].style.width = "100%";
    }
}

.image-container {
    height: 300px;
    width: 500px;
    overflow: hidden;
    background: floralwhite;
    border: 2px solid silver;
    margin-bottom: 2em;
}

<div class="image-container">
    <img src="https://placehold.it/200x300">
</div>

<div class="image-container">
    <img src="https://placehold.it/600x300">
</div>

<div class="image-container">
    <img src="https://placehold.it/500x500">
</div>