[Примечание: CSS] width & max-width не искажают изображение маленьким уголком брови

Это подводный камень, на который я наступил, когда работал над сокращением веб-страницы, поэтому лучше сразу посмотреть пример!

Сначала вывод.

● Когда изображение меньше контейнера, width позволит изображению масштабироваться вместе с контейнером, в то время как max-width имеет ограничение по ширине, оба варианта визуально выглядят одинаково.

Когда изображение больше контейнера, ширина масштабирует изображение вместе с контейнером, что может вызвать искажение, в то время как max-width также масштабирует, но не вызывает искажения

● object-fit может быть применен к width, чтобы помочь восстановить искажение, но не к max-width.

Когда вы будете готовы, давайте посмотрим пример из реальной жизни!

Сначала создайте HTML-структуру, которая будет использоваться.

<div class="containter">
  <div class="img-box">
    <img src="https://i.imgur.com/jTI0E4n.jpg" alt="">
  </div>
</div>

Img-box - это контейнер для изображения, которое изначально имеет размер 640 x 960 px.

Когда изображение меньше контейнера: визуально оба изображения могут выглядеть одинаково.

/* 圖片: 640 x 960 px */
.img-box {
  width: 700px;
  height: 1000px;
}

Когда контейнер установлен на размер больше, чем само изображение, width: 100%, размер изображения в модели бокса выглядит следующим образом

Из вышеприведенного видно, что размер изображения в основном совпадает с размером контейнера, т.е. при width: 100% изображение масштабируется с размером контейнера.

Теперь давайте посмотрим, что произойдет, если мы изменим max-width: 100%.

Вы заметили, что ширина была уменьшена! (Она стала меньше, но я еще не нашел причину корректировки максимальной ширины, так что не стесняйтесь добавлять к этому><)

Визуально, изображения представлены таким образом, что вы не сможете увидеть особой разницы, если не присмотритесь: изображение справа выглядит немного шире, чем изображение справа.

Когда изображение больше, чем контейнер: ширина с большей вероятностью приведет к искажениям

Измените размер контейнера до размера, меньшего, чем размер изображения:

/* 圖片: 640 x 960 px */
.img-box {
  width: 500px;
  height: 500px;
}

Модель коробки при ширине: 100%.

Вы можете видеть, что изображение идеально подходит к коробке!

Однако, когда мы изменим его на max-width: 100%.

Теперь ширина составляет всего 333px! В этот момент мы можем четко увидеть разницу в изображении:.

Как видно из приведенного выше изображения, когда контейнер меньше, чем изображение.

◆ width: 100% увеличит изображение за счет контейнера, что может привести к тому, что изображение будет растянуто некрасиво и искажено

Max-width: 100% также увеличит изображение за счет контейнера и не исказит его! Однако ширина и длина изображения будут зависеть от контейнера, что повлияет на внешний вид изображения.

Можно ли использовать объектную подгонку для решения проблемы искажения изображения?

Во-первых, ответ "да" для ширины, но не для max-width.

Давайте добавим в код object-fit и будем ожидать, что изображение будет соответствовать контейнеру.

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

Здесь object-fit: cover используется, чтобы позволить изображению масштабироваться в соответствии с собственным соотношением сторон, чтобы избежать искажений, за исключением того, что часть изображения, превышающая контейнер, будет вырезана.

Разница хорошо видна при непосредственном сравнении двух изображений.

Изображение слева, widh: 100%, использует характеристики object-fit, так что, хотя избыток обрезается, изображение не сжимается уродливым образом; однако изображение справа, max-width: 100%, остается неизменным. Моя личная интерпретация концепции заключается в том, что max-width является обязательным и будет очень жестким ограничением ширины, и не может быть скорректирована каким-либо другим способом.

Image credit: Photo by Nathan Dumlao on Unsplash

Не стесняйтесь указывать на ошибки и не стесняйтесь обсуждать :)