Как увеличить Img в CSS, сохраняя соотношение сторон?

Question

Немного погуглив, я нашел это

HTML

<div class="divContainer">
    <img src="image.png">
<div>

CSS

.divContainer{
   width :200px;
   height:200px;
   border:solid;
 }

img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

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

Есть идеи?

Answer 1

Изменить object-fit: contain; на object-fit: cover;.

.divContainer {
   width: 700px; /* Bigger than image's width. */
   height: 500px; /* Bigger than image's height. */
   border: solid;
 }

img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

<div class="divContainer">
    <img src="https://dotjpg.co/YfUB.jpg"> <!-- Image Dimensions: 640px x 426px -->
<div>

Answer 2

Прежде всего, вы должны использовать auto для высоты, если вы хотите сохранить соотношение сторон.Просто установите ширину.Во-вторых, в вашем примере, поскольку вы устанавливаете высоту и ширину родительского элемента, это то, что img может «расти».Это не останавливается из-за его собственного размера, но из-за размера его родителя.