Введение
В этом практическом занятии мы научимся использовать CSS для подгонки и позиционирования изображений внутри их контейнеров, сохраняя при этом их соотношение сторон. Мы изучим свойства object-fit и object-position и то, как их можно использовать для достижения различных результатов. В конце этого практического занятия вы сможете создавать визуально привлекательные изображения, которые идеально вписываются в их назначенное пространство.
Подгонка изображения под контейнер
В ВМ уже предоставлены index.html и style.css.
Для того чтобы подогнать изображение внутри своего контейнера, сохраняя при этом его соотношение сторон, вы можете использовать object-fit: contain. Для того чтобы заполнить контейнер изображением, сохраняя при этом его соотношение сторон, используйте object-fit: cover. Если вы хотите расположить изображение по центру контейнера, вы можете использовать object-position: center.
Вот пример того, как вы можете использовать эти свойства:
<img class="image image-contain" src="https://picsum.photos/600/200" />
<img class="image image-cover" src="https://picsum.photos/600/200" />
И соответствующий CSS:
.image {
background: #34495e;
border: 1px solid #34495e;
width: 200px;
height: 200px;
}
.image-contain {
object-fit: contain;
object-position: center;
}
.image-cover {
object-fit: cover;
object-position: right top;
}
Пожалуйста, нажмите кнопку "Go Live" в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.
Резюме
Поздравляем! Вы завершили практическое занятие "Подгонка изображения под контейнер". Вы можете практиковаться в других практических занятиях в LabEx, чтобы улучшить свои навыки.