В статье рассмотрим, как автоматически изменить размер изображения в соответствии с контейнером div с помощью CSS. Для автоматического изменения размера изображения или видео для размещения в контейнере div используйте свойство object-fit. Он используется для указания того, как изображение или видео помещается в контейнер.
Свойство подгонки объекта: это свойство используется, чтобы указать, как изображение или видео изменяют размер и помещают контейнер. Он сообщает контенту, как разместить его в определенном контейнере div различными способами, например сохранить это соотношение сторон или растянуть и занять как можно больше места.
Пример 1. В этом примере описывается автоматическое изменение размера изображения для подходящего для контейнера div. Этот пример не содержит свойство подгонки объекта.
HTML
Код
<div class = "geeks">
<img src=
"https://cdncontribute.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png"
alt = "Ключевое слово" />
</div>
CSS
Код
.geeks {
width:60%;
height:300px;
}
img {
width:100%;
height:100%;
}
В приведенном выше примере, поскольку свойство подгонки объекта не используется, изображение сжимается, чтобы соответствовать размеру контейнера, и его исходное соотношение сторон уничтожается.
Демонстрация
Пример 2: Этот пример используется для отображения части изображения при использовании изменения размера контейнера div.
HTML
Код
<div class = "geeks">
<img src=
"https://cdncontribute.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png"
alt = "Начинающему вебмастеру" />
</div>
CSS
Код
.geeks {
width:60%;
height:300px;
}
img {
width:100%;
height:100%;
object-fit:cover;
}
Примечание: Использование подгонки объекта: обложка; будет обрезать края изображения, сохраняя пропорции, а также заполняя пространство.
Демонстрация
Пример 3: В этом примере отображается изображение без использования свойства подгонки объекта. В этом примере размер изображения устанавливается вручную, и изображение не сможет поддерживать свое соотношение сторон и настраивать или изменять размер в соответствии с контейнером div при изменении размера окна браузера
HTML
Код
<img src=
"https://cdncontribute.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png"
alt="
Форум">
CSS
Код
body {
text-align:center;
}
img {
width:400px;
height:200px;
}
Демонстрация
Пример 4: В этом примере отображается часть изображения или изображения с использованием свойства подгонки объекта. В этом примере размер изображения задается вручную, а также используется свойство подгонки объекта. В этом случае при изменении размера браузера изображение сохранит свое соотношение сторон и не будет изменено в соответствии с контейнером div.
HTML
Код
<img src=
"https://cdncontribute.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png"
alt="Изменить размер изображения в div на CSS ">
CSS
Код
body {
text-align:center;
}
img {
width:400px;
height:200px;
object-fit: cover;
}
Примечание: свойство object-fit: cover; будет вырезать стороны изображения, сохраняя пропорции, а также заполняя пространство.
Демонстрация
