Сохранять пропорции изображения, когда ширина превышает высоту

Question

Я пытаюсь сохранить правильное соотношение сторон изображения, когда либо width > height ИЛИ height > width.У меня возникла проблема с этим, когда ширина превышает высоту, изображение будет переполнено в родительский контейнер.Я не хочу, чтобы это произошло, вместо этого перенастройте размер изображения, чтобы он сохранял правильное соотношение сторон.

В этом примере изображение имеет размер 640 x 480 с соотношением 4: 3

.я перетаскиваю контейнер шириной меньше необходимой мне высоты, даже дополняя верх / низ без переполнения изображения.Если я перетаскиваю контейнер шире, чем высота, тогда мне нужно даже заполнить влево / вправо без переполнения изображения.

.main {
    height: 100%;
    width: 100%;
}
.wrapper {
    position: relative;
    padding-bottom: 75%;
}
.wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

<div class="main">
    <div class="wrapper">
        <img src="https://placeimg.com/640/480/animals" />
    </div>
</div>

JSFiddle

Answer 1

Для современных браузеров, вы должны только установить ширину. Браузер сделает все остальное.

Пример:

.main {
    height: auto;
    width: auto;
}
.wrapper {
    position: relative;
    padding-bottom: 75%;
}
.wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

Answer 2

Вы можете установить height:auto и width:100%, чтобы сделать ваше изображение отзывчивым

.my-img {
  width: 100%;
  height: auto;
}

<img src="https://placeimg.com/640/480/animals" alt="Nature" class="my-img" >