В чем причина такой высоты: авто иногда 0 - PullRequest
Новая
       35

В чем причина такой высоты: авто иногда 0

1 голос
/ 01 мая 2019 

#banner {
background: url(http://www.lazarangelov.com/wp-content/uploads/2015/12/lazar1-1920.jpg) no-repeat center center/contain;
  height: auto;
  max-width: 100%;
 
<div id="banner"></div>

img {
  height: auto;
  max-width: 100%;}
 
<img src="http://www.lazarangelov.com/wp-content/uploads/2015/12/lazar1-1920.jpg" alt="">

У меня всегда возникала проблема с адаптивными изображениями, и я не нашел ответа для выяснения проблемы.

Проблемас изображением 

image {
  height:auto;
  width:100%;
}

Когда я добавляю простое изображение и стилизую его, это работает.когда я начинаю более сложный проект с большим количеством элементов div и устанавливаю те же свойства, он больше не работает.Какое самое чистое объяснение этому.

1 Ответ

1 голос
/ 01 мая 2019

Это потому, что когда вы добавляете <img> непосредственно в html, браузер устанавливает высоту элемента равной высоте предоставленного вами изображения (если не указано иное). Когда вы добавляете изображение в качестве фона <div> и устанавливаете высоту на авто, оно пытается изменить размер div до высоты содержимого. Однако в этом случае нет содержимого - только фон, который будет фоном, когда div имеет некоторую высоту. Пустой div не имеет высоты. Поэтому, если вы хотите, чтобы изображение было фоном <div>, оно должно либо содержать некоторый контент, либо иметь его высоту, установленную вручную.

...