Это подводный камень, на который я наступил, когда работал над сокращением веб-страницы, поэтому лучше сразу посмотреть пример!
Сначала вывод.
● Когда изображение меньше контейнера, 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
Не стесняйтесь указывать на ошибки и не стесняйтесь обсуждать :)
20.08.2023 18:21
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в 2023-2024 годах? Или это полная лажа?".
20.08.2023 17:46
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
19.08.2023 18:39
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в частности, магию поплавков и гибкость flexbox.
19.08.2023 17:22
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для чтения благодаря своей простоте. Кроме того, мы всегда хотим проверить самые последние возможности в наших проектах!
18.08.2023 20:33
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий их языку и культуре.
14.08.2023 14:49
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип предназначен для представления неделимого значения.