• Теория
  • Теория

Чиним вёрстку, свойства max-width и height

Мы увеличили картинку в одной из карточек, и вёрстка сломалась.

Так произошло потому, что карточкам задана фиксированная ширина. Если использовать картинку большего размера, она выпадет из контейнера. Чтобы не допускать подобного, верстальщики добавляют картинкам такие стили:

img {
  max-width: 100%;
  height: auto;
}

Свойство max-width задаёт максимальную ширину, а значение 100% говорит, что элемент не должен становиться больше ширины родителя.

Свойство height задаёт высоту элемента. Значение auto используют, чтобы изображение не деформировалось и сохраняло свои пропорции. Если его не указать, то будет использовано значение атрибута height из разметки, и изображение, скорее всего, исказится.

Этот способ работает, потому что у CSS-свойств max-width и height приоритет выше, чем у атрибутов width и height в разметке.

Добавим картинкам максимальную ширину 100% и автоматическую высоту. После этого увеличим картинки в оставшихся карточках и убедимся, что они не выпадают и не деформируются.

В браузере Safari картинки могут слегка деформироваться даже после добавления им максимальной ширины и автоматической высоты. Проблему можно решить, обернув картинку в любой подходящий тег, например <figure> или <div>.

Мы уже много раз тестировали вёрстку, изменяя содержимое компонентов. В настоящей работе вёрстку также необходимо тестировать в разных браузерах.

Хотите начать карьеру веб-разработчика? Записывайтесь на профессию «Фронтенд-разработчик». Всего от 4690 ₽в месяц.

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Микросетки. Продолжение» тренажёра «Базовые механики построения сеток» можно после регистрации и оформления подписки.