адаптивных изображений | Проект Один
Введение
Изображения требуют особого внимания на адаптивных веб-сайтах. В этом уроке будут представлены некоторые проблемы, возникающие при работе с адаптивными изображениями, и варианты, которые у вас есть при работе с ними.
Результаты обучения
- Вы узнаете, как заставить изображения работать правильно при изменении их размера с помощью CSS.
- Вы узнаете, как отображать разные изображения в зависимости от размера экрана.
Основы
Самая основная проблема, с которой вы столкнетесь при работе с адаптивными изображениями, — это соотношение сторон или соотношение между шириной и высотой. Если вы уменьшите ширину изображения на небольших экранах, а также не измените высоту, изображение будет искажено!
Решение этой проблемы невероятно простое, и мы уже упоминали его в предыдущем уроке: просто не определяйте одновременно ширину и высоту. Если изображению задана гибкая ширина, а высота установлена на auto , тогда он должен правильно сохранить соотношение сторон.
background-size, background-position и object-fit
Что делать, если вы не хотите, чтобы ваше изображение просто уменьшалось (как по высоте, так и по ширине)? background-size и object-fit — это два свойства, которые могут обеспечить немного большую гибкость (каламбур) при обработке соотношения сторон.
background-position и background-size — это свойства, которые работают с элементами с фоновым изображением и не работают с обычными img теги. Позже вы увидите некоторые примеры и особенности в задании на чтение, но вы можете получить достаточно большой контроль над отображением и размещением фоновых изображений, работая с этими свойствами. Например, background-size: обложка изменит размер изображения так, чтобы оно всегда полностью заполняло свой контейнер, обрезая его как можно меньше.
Вот небольшая демонстрация, с которой вы можете поиграть:
object-fit работает аналогично, но предназначен для тегов img . С помощью свойства object-fit вы можете указать ширину и высоту для ваших изображений, а затем указать изображению, как оно должно соответствовать этим размерам. Значение по умолчанию для объектного соответствия — это fill , который просто растягивает изображение, чтобы соответствовать размерам, но так же, как background-size , вы также можете сказать, что покрывает содержит изображение.
Вот демонстрация объектно-подгонки на изображении. Откройте это на CodePen и измените размер браузера, чтобы увидеть, как изображение реагирует.
См. перо подгонка объектов от TheOdinProject (@TheOdinProjectExamples) на КодПене.
Еще больше контроля!
Также можно буквально использовать различных изображения
объектно-подгонке , чтобы удерживать объект фотографии в кадре, вы можете представить его обрезанную версию на небольших экранах. Есть два способа добиться этого, но наиболее гибким является использование тега , который вы увидите в задании на чтение.Назначение
- Сначала ознакомьтесь с документацией по параметрам background-size, background-position и object-fit. Демонстрации на этих страницах должны прояснить их использование.
