#css
#css
Вопрос:
.header-img {
background-image: url("https://cdn.pixabay.com/photo/2016/04/15/04/02/water-1330252__340.jpg");
background-size: contain;
background-repeat: no-repeat;
height: 300px;
}
По мере уменьшения размера окна браузера изображение масштабируется, а разрыв между изображением и содержимым продолжает увеличиваться.
Мне нужно решить эту проблему, и мне нужно сохранить размер фона, чтобы содержать.
<div class="header-img">
</div>
<div class="content">
sddsfsdfsdfdsfdsf
</div>
Комментарии:
1. я бы рекомендовал не устанавливать фиксированную высоту для этого, если вы не собираетесь обрезать фоновое изображение. Возможно, вы захотите изучить медиа-запросы CSS, чтобы масштабировать размер div, или просто связать изображение и поместить содержимое поверх него с абсолютным позиционированием и z-индексом.
Ответ №1:
Используйте background-size: cover , если вы хотите, чтобы ваше изображение сохраняло оригинал height
.header-img {
background-image: url("https://cdn.pixabay.com/photo/2016/04/15/04/02/water-1330252__340.jpg");
background-size: cover;
background-repeat: no-repeat;
height: 300px;
} <div class="header-img">
</div>
<div class="content">
sddsfsdfsdfdsfdsf
</div> Комментарии:
1. размер фона: обложка; делает изображение не реагирующим
2. обложка сохранит высоту вашего div и изменит размер фона при изменении ширины экрана. При небольшой ширине ваш фон будет оставлен сверху, и если ваш экран слишком большой, фоновое изображение будет закрывать ваш контейнер. Если вы хотите, чтобы ваш фон всегда был в центре, вы можете добавить
background-position: center3. когда вы используете
contain, ваш контейнер сохраняет ту же высоту, но ваш фон — нет. это происходит потому, что фоновое изображение изменяется, чтобы убедиться, что изображение полностью видно