• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Изменить размер изображения в div на CSS (Как изменить размер картинки в нужном DIV через CSS)
Изменить размер изображения в div на CSS
Kosten
Понедельник, 29 Апреля 2019 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44269
Награды: 70
В статье рассмотрим, как автоматически изменить размер изображения в соответствии с контейнером 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; будет вырезать стороны изображения, сохраняя пропорции, а также заполняя пространство.

Демонстрация
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Изменить размер изображения в div на CSS (Как изменить размер картинки в нужном DIV через CSS)
  • Страница 1 из 1
  • 1
Поиск: