CSS как вы растягиваетесь, чтобы соответствовать и поддерживать соотношение сторон?

У меня есть следующий css:

.mod.left {
background-image: url("http://www.myimage.jpg");
display: block;
height: 160px;
overflow: hidden;
width: 175px;
}

Это соответствует этому HTML:

<div class="mod left"></div>

Это приводит к беспорядку:

если я использую css3 background-size: 175px 160px; Соотношение сторон действительно перепутано, что приводит к беспорядку вроде этого:

Есть ли способ растянуть изображение в соответствии с div? Но каким образом поддерживается соотношение сторон? Я хочу автоматическую обрезку.

Ответ 1

Это должно работать (в браузерах, поддерживающих background-size):

background-size: 175px auto;

Вы также можете попробовать:

background-size: cover;

Или:

background-size: contain;

Там есть хорошее объяснение по MDC.

Ответ 2

Нужно ли быть фоновым изображением?

img{
width:300px;
height:auto;
}


<img src="your-photo.png">

Ответ 3

Вы можете использовать свойство background-size со значением contain:

background-size: contain;

Вот рабочий пример: https://jsfiddle.net/gusrodriguez/auuk97hf/1/

В приведенном выше примере тело имеет растянутое изображение в фоновом режиме. Также есть два div с произвольным размером и с другим изображением, которое подходит и поддерживает соотношение сторон.