Как сделать фоновое изображение на всю ширину без обрезки?

Question

Мы установили изображение в качестве фонового изображения, используя следующий код ниже, и поместили текст поверх него.Есть ли способ отобразить изображение в качестве фона без «обрезки» независимо от высоты содержимого в верхней части изображения?

Образец, который возникает при увеличении содержимого, - высотаизображение.Если решение требует, чтобы мы избавились от этого, тогда я согласен с этим.

Примечание: изображения не всегда будут одинакового размера.

Текущие результаты

Желаемые результаты

.banner {
  position: relative;
  display: block;
}

.banner:after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}

.banner__image {
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.banner__content {
  padding: 200px;
  position: relative;
  max-width: 900px;
  text-shadow: 0 0 20px rgba(0,0,0,.6);
  margin: 0 auto;
  padding: 0 15px;
  z-index: 2;
  color: white;
}

<div class="banner">
  <div class="banner__image" style="background-image: url('https://media.istockphoto.com/vectors/people-large-group-vector-id519533182')"></div>
  <div class="banner__content">
    <h1>Compellingly seize high-payoff supply chains</h1>
    <h2>Compellingly underwhelm extensive technology rather than low-risk high-yield manufactured products. Phosfluorescently brand just in.</h2>
  </div>
</div>

Answer 1

Вы должны посмотреть на максимальные и минимальные атрибуты высоты в css для вашего класса:

.banner

Кроме того, вы также можете посмотреть на атрибут background-repeat css, чтобы предотвратить повторение изображения или, в качестве альтернативы, повторение на обоих или только на оси x или y.

Я могу предоставить некоторый код, если хотите, но он очень понятен, могут быть более элегантные решения, но это поможет вам достичь того, что вы ищете.

Повтор: https://www.w3schools.com/cssref/pr_background-repeat.asp

Высота: https://www.w3schools.com/cssref/pr_dim_min-height.asp https://www.w3schools.com/cssref/pr_dim_max-height.asp

Answer 2

Тогда не используйте изображение в качестве фонового изображения.Используйте его как обычное изображение.

<div class="banner__image">
    <img src="url of the image">
</div>
<div class="banner__content">
    <!-- Your content here -->
</div>

И для CSS

.banner__image img{
    position:absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
}
.banner__image{
    position: absolute;
    z-index: 1;
    height: 100%;
    width: 100%;
}
.banner__content{
    z-index: 3;
}

Теперь это должно работать

Answer 3

Вы можете использовать отступ в .banner

.banner {
  position: relative;
  display: block;
  padding : 50px 0;
}

Answer 4

Один из способов сделать это, если вы не знаете, какой будет высота изображения, вы можете использовать изображение вместо div с фоном и установить его абсолютное положение: Fiddle

.banner {
  position: relative;
  display: block;
}

.banner:after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}

.banner__image {
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.banner__content {
  padding: 200px;
  position: relative;
  max-width: 900px;
  text-shadow: 0 0 20px rgba(0,0,0,.6);
  margin: 0 auto;
  padding: 0 15px;
  z-index: 2;
  color: white;
}

#bg{
  position: absolute;
  width: 100%;
}

<div class="banner">
  <!--
  <div class="banner__image" style="background-image: url('https://media.istockphoto.com/vectors/people-large-group-vector-id519533182')"></div>
  -->
  <img src="https://media.istockphoto.com/vectors/people-large-group-vector-id519533182" id="bg"/>
  <div class="banner__content">
    <h1>Compellingly seize high-payoff supply chains</h1>
    <h2>Compellingly underwhelm extensive technology rather than low-risk high-yield manufactured products. Phosfluorescently brand just in.</h2>
  </div>
</div>

Answer 5

Используя процентное значение в padding-bottom значении, процент вычисляется из width элемента, а не из height, как можно подумать.

Что означает

padding-bottom: 42.773%; /* (438 × 100 / 1024) */

... всегда будет иметь минимальную высоту, позволяющую отображать необрезанное изображение (которое в вашем случае имеет 1024px × 438px).

.min-ratio {
  padding-bottom: 42.7%;  /* (height × 100 / width) */
  background-size: contain;
  background-position: bottom center;
  background-repeat: no-repeat;
  width: 100%;
  position: relative;
}

.banner__content {
  position: absolute;
  background-color: #00000065;
  color: white;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0 3rem;
}

@media(max-width: 600px) {
  .banner__content {
    position: static;
  }
  .min-ratio {
    background-size: cover;
    padding-bottom: 0;
  }
}

.banner__content>* {
  align-self: stretch;
}

<div class="min-ratio" style="background-image: url(https://media.istockphoto.com/vectors/people-large-group-vector-id519533182)">
  <div class="banner__content">
    <h1>Compellingly seize high-payoff supply chains</h1>
    <h2>Compellingly underwhelm extensive technology rather than low-risk high-yield manufactured products. Phosfluorescently brand just in.</h2>
  </div>
</div>

Однако вам нужно будет остановить повторение изображения по вертикали, используя background-repeat:no-repeat, чтобы когда div становился слишком высоким (например, на мобильном устройстве), он не повторял изображение.

Вышеупомянутая методика позволяет вам установить минимальное отношение для элемента, без необходимости жестко кодировать значения width или height в различных @media интервалах реагирования.

Так как фрагменты стека смотрят вниз, вот скрипка: https://jsfiddle.net/websiter/mek0chne/4/