От автора: для вас, как для веб-разработчика, существует высокая вероятность того, что вы столкнетесь с двумя проблемами, описанными в этой статье: изображениями и сжатыми сроками. Иногда по каким-то причинам ваши изображения не будут соответствовать макету, и вы не будете иметь возможности ломать над этим голову часами.
Подобная ситуация случалась со мной много раз, и я вынес урок из своих ошибок. Когда создается адаптивное изображение CSS — никаких больше черных волшебных хаков. Вот мои пять избранных методов для обработки изменения размера изображения.
Способ «Мне это нужно как можно скорее»
В пятницу в 5:00 вечера, вы должны закончить эту страницу, но изображения не соответствуют макету. Пришло время использовать этот волшебный трюк!
.myImg { background-image: url("my-image.png"); background-size: cover;
}Звучит знакомо? Мы все делали это когда-то, хотя немного похоже на чит? Использование свойств background очень полезно, они просто работают. Тем не менее, помните, что вы должны использовать их только для неконтентных изображений или в качестве замены текста и в некоторых исключительных случаях.
Мой способ из будущего
Что, если я вам скажу, что такая магия существует и для элементов img? Скажите «Привет!» свойству object-fit, которое также работает и с видео, кстати!
.myImg { object-fit: cover; width: 320px; height: 180px;
}Это все! Посмотрите, как, когда мы извлечем значение cover, мы также можем использовать contain.
ОК, в чем подвох?
К сожалению, object-fit не будет работать в IE и более старых версиях Safari, но есть полифилл.
Способ “Netflix”
Вы можете подумать «отличный трюк, еще один способ, который не работает в старых браузерах, таких как IE». Не беспокойтесь, это работает везде, и это мой любимый прием! Вам нужно будет обернуть изображение в элемент с относительными полями.
Мы сохраним соотношение сторон изображения в процентах от свойства padding. Ваше изображение будет полноразмерным абсолютным дочерним элементом. Код выглядит так:
.wrapper { position: relative; padding-top: 56.25%; /* 16:9 Aspect Ratio */
} img { position: absolute; left: 0; top: 0; width: 100%; height: auto;
}«Эй, старик, это выглядит сложным». Как только вы поймете концепцию, все остальное будет просто. Netflix использует это!
Небольшая демо-версия:
Простой способ
Вы уже знаете это:
img { height: auto; width: 100%; /* еще больше контроля с помощью max-width */ max-width: 720px;
}Если ваш макет не слишком сложный, это работает в большинстве случаев.
Производительный способ (продвинутый)
Под производительностью я имею в виду время загрузки. Большое hero-изображение может увеличить его и сделать вашу страницу медленной, особенно на мобильных устройствах.
Знаете ли вы, что в современных браузерах вы можете изменять источник изображения в зависимости от ширины страницы? Вот для чего предназначено srcset!
Вы можете комбинировать его с тегом HTML 5 picture, который изящно сочетается с img.
<picture> <source media="(max-width: 799px)" srcset="elva-480w.jpg"> <source media="(min-width: 800px)" srcset="elva-800w.jpg"> <img src="elva-800w.jpg"> </picture>
Резюмируя
Используйте background-image, если ваше изображение не является частью содержимого страницы.
Используйте object-fit, если вы не заботитесь об IE.
Техника контейнера с полями, используемая Netflix, работает везде.
В большинстве случаев просто добавьте в CSS height: auto;.
Если вам нужно быстрое время загрузки, используйте srcset для загрузки меньших изображений на мобильных устройствах.
Автор: Adrien Zaganelli
Источник: https://medium.freecodecamp.org/
Редакция: Команда webformyself.