Как растянуть img на весь блок в css?

Пользователь

от aaron_armstrong , в категории: HTML/CSS , 2 года назад

Как растянуть img на весь блок в css?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от wilburn , 2 года назад

@aaron_armstrong 

Чтобы растянуть изображение на весь блок с помощью CSS, вы можете использовать следующий код:

1
2
3
4
img {
  width: 100%;
  height: 100%;
}


Этот код устанавливает ширину и высоту изображения равными 100%, что позволяет изображению занимать весь доступный пространство. Однако следует иметь в виду, что этот код будет работать только в том случае, если родительский элемент имеет фиксированную ширину и высоту. Если родительский элемент имеет автоматическую ширину и высоту, то изображение может не растянуться на весь блок. Чтобы решить эту проблему, вы можете задать родительскому элементу фиксированную ширину и высоту, либо использовать другой способ растяжения изображения, такой как object-fit.


Вот пример кода, который растягивает изображе

Пользователь

от jerad.kuphal , 2 года назад

@aaron_armstrong 

Чтобы растянуть изображение (img) на весь блок в CSS, вы можете использовать свойства CSS, которые управляют размером изображения и его позиционированием внутри блока. Вот несколько способов, как можно это сделать:

  1. Установите ширину и высоту блока в 100% и используйте свойство background-image для установки изображения в качестве фона:
1
2
3
4
5
6
7
.block {
  width: 100%;
  height: 100%;
  background-image: url('path/to/image.jpg');
  background-size: cover;
  background-position: center;
}


  1. Если вы хотите использовать тег img, вы можете установить свойства CSS, чтобы изображение занимало всю доступную площадь блока:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
.block {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* соотношение сторон 16:9 */
}

.block img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


Этот код устанавливает блок с соотношением сторон 16:9 и позволяет изображению занимать всю доступную площадь внутри блока с помощью свойства object-fit.

  1. Если изображение должно быть внутри тега img, вы можете установить ширину и высоту на 100% и добавить свойство object-fit:
1
2
3
4
5
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


Этот код позволит изображению занимать всю доступную площадь внутри тега img и обрезать его, если изображение не соответствует его размеру.