Попытка заставить изображения соответствовать в коробке и Коробках, чтобы быть отзывчивыми

Question

Я пытаюсь заставить этот код работать, я нахожусь на 90% пути, но мне трудно масштабировать и адаптировать flexbox. То, что я хочу знать, это:

1) Когда я изменяю ширину на auto в строке 20 (также 44 и 68), почему изображение исчезает? Я хочу, чтобы изображение помещалось в поле, а наложение текста было поверх изображения.

2) Как сделать так, чтобы окно с изображениями было отзывчивым? Когда я в Mobile, я хочу, чтобы они сложились, а затем согнулись, когда они доберутся до рабочего стола, чтобы они были в ряд. Таким образом, столбец, чтобы грести. Почему это не работает?

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

HTML

<div class="opener-wrapper">

  <div id="opener1" class="opener flex-center">
    <div class="opener-msg">
      <h1 class="opener-title">Lorem Ipsum Title</h1>
      <p class="opener-subtitle">Lorem Ipsum Text that doesnt matter</p>
    </div>
  </div>
  <div id="opener2" class="opener flex-center">
    <div class="opener-msg">
      <h1 class="opener-title">Lore Ipsum Title</h1>
      <p class="opener-subtitle">Lorem Ipsum Text that doesnt matter</p>
    </div>
  </div>
  <div id="opener3" class="opener flex-center">
    <div class="opener-msg">
      <h1 class="opener-title">Lorem Ipsum Title</h1>
      <p class="opener-subtitle">Lorem Ipsum Text that doesnt matter</p>
    </div>
  </div>

</div>

CSS

.opener-wrapper {
  display: flex;
  flex-wrap: wrap;
}

.opener {
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
}

#opener1::before {
  background-image: url('https://source.unsplash.com/random');
  background-size: cover;
  background-position: center;
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 12em;
  z-index: -2;
  opacity: 0.7;
}

#opener1::after {
  background-color: #314F59;
  content: "";
  display: block;
  position: absolute;
  width: auto;
  height: 100%;
  z-index: -1;
  opacity: .35;
}

#opener2::before {
  background-image: url('https://source.unsplash.com/random');
  background-size: cover;
  background-position: center;
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 12em;
  z-index: -2;
  opacity: 0.7;
}

#opener2::after {
  background-color: #314F59;
  content: "";
  display: block;
  position: absolute;
  width: auto;
  height: 100%;
  z-index: -1;
  opacity: .35;
}

#opener3::before {
  background-image: url('https://source.unsplash.com/random');
  background-size: cover;
  background-position: center;
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 12em;
  z-index: -2;
  opacity: 0.7;
}

#opener3::after {
  background-color: #314F59;
  content: "";
  display: block;
  position: absolute;
  width: auto;
  height: 100%;
  z-index: -1;
  opacity: .35;
}

.flex-center {
  /* display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;  */
}

.opener-msg {
  color: #fff;
  text-shadow: #343a40 2px 2px;
  min-width: 100%;
  min-height: 12em;
  position: relative;
  margin: 3% 0;
  text-transform: uppercase;
}

.opener-msg::before {
  content: "";
  display: block;
  position: absolute;
  margin-left: 0;
  min-width: 100%;
  min-height: 12em;
  z-index: -1;
  opacity: 0.4;
  background-color: #343a40;
}

.opener-title,
.opener-subtitle {
  width: 100%;
  display: block;
  text-align: center;
}

.opener-title {
  margin: 3% 0;
}

Answer 1

1) Когда я изменяю ширину на auto в строке 20 (также 44 и 68), почему изображение исчезает?Я хочу, чтобы изображение помещалось в поле, а наложение текста было поверх изображения.

Для этого поля установлено значение position: absolute.Абсолютно позиционированные элементы имеют размер относительно их родительского контейнера (или следующего относительно позиционированного родителя).Они требуют ширины и высоты.

Что, если вы установите background-image на #opener1 и установите цветовой оверлей на #opener1::after?

2) Как заставить блок изображения реагировать?Когда я в Mobile, я хочу, чтобы они сложились, а затем согнулись, когда они доберутся до рабочего стола, чтобы они оказались в ряду.Таким образом, столбец, чтобы грести.Почему это не работает?

Вам нужно установить flex-direction на row на гибком контейнере.В настоящее время нет flex-direction установленного на .opener-wrapper.Это позволит коробкам течь горизонтально.Кроме того, для min-width установлено значение 100%.Это гарантирует, что ваши ящики занимают 100% ширины - это не то, что вы хотите.Удалите эту строку и добавьте max-width: 33.33%;.

Возможно, вы захотите взглянуть на Полное руководство по Flexbox Криса Койера, если вы еще этого не сделали!

Answer 2

1) width: auto; устанавливает ширину элемента в ширину браузера по умолчанию.В этом случае браузер инициализирует псевдоэлемент :before шириной 0px, который можно увидеть в вычисленных стилях в это изображение imgur

2) Вам потребуется @media правила изменения размера элементов в зависимости от того, как страница просматривается.В настоящее время все ваши новички имеют width и min-width 100%.Это заставляет их использовать 100% занимаемого ими пространства.Если вы хотите, чтобы элементы отображались в одной строке, вы должны разделить эти 100% на количество элементов, которые вы хотите отобразить в каждой строке.Для случая этих трех элементов я сделал следующее:

.opener {
  width: 33%;
  height: 100%;
  min-width: 33%;
  min-height: 100%;
} 

Чтобы продолжить, я добавил в CSS секцию @media, чтобы изменить ширину элементов до 100% при отображениименьше 600px.

@media only screen and (max-width: 600px) {
    .opener {
        width: 100%;
        height: 100%;
        min-width: 100%;
        min-height: 100%;
    }

    #opener1::before {
        width: 100%;
        min-width: 100%;
    }

    #opener2::before {
        width: 100%;
        min-width: 100%;
    }

    #opener3::before {
        width: 100%;
        min-width: 100%;
    }

}

Все вместе, ваш CSS должен быть похож на это:

.opener-wrapper {
  display: flex;
  flex-wrap: wrap;
}

.opener {
  width: 33%;
  height: 100%;
  min-width: 33%;
  min-height: 100%;
} 

#opener1::before {
  background-image: url('https://source.unsplash.com/random');
  background-size: cover;
  background-position: center;
  content: "";
  display: block;
  position: absolute;
  width: 33%;
  height: 12em;
  z-index: -2;
  opacity: 0.7;
}

#opener1::after {
  background-color: #314F59;
  content: "";
  display: block;
  position: absolute;
  width: auto;
  height: 100%;
  z-index: -1;
  opacity: .35;
}

#opener2::before {
  background-image: url('https://source.unsplash.com/random');
  background-size: cover;
  background-position: center;
  content: "";
  display: block;
  position: absolute;
  width: 33%;
  height: 12em;
  z-index: -2;
  opacity: 0.7;
}

#opener2::after {
  background-color: #314F59;
  content: "";
  display: block;
  position: absolute;
  width: auto;
  height: 100%;
  z-index: -1;
  opacity: .35;
}

#opener3::before {
  background-image: url('https://source.unsplash.com/random');
  background-size: cover;
  background-position: center;
  content: "";
  display: block;
  position: absolute;
  width: 33%;
  height: 12em;
  z-index: -2;
  opacity: 0.7;
}

#opener3::after {
  background-color: #314F59;
  content: "";
  display: block;
  position: absolute;
  width: auto;
  height: 100%;
  z-index: -1;
  opacity: .35;
}

.flex-center {
  /* display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;  */
}

.opener-msg {
  color: #fff;
  text-shadow: #343a40 2px 2px;
  min-width: 100%;
  min-height: 12em;
  position: relative;
  margin: 3% 0;
  text-transform: uppercase;
}

.opener-msg::before {
  content: "";
  display: block;
  position: absolute;
  margin-left: 0;
  min-width: 100%;
  min-height: 12em;
  z-index: -1;
  opacity: 0.4;
  background-color: #343a40;
}

.opener-title,
.opener-subtitle {
  width: 100%;
  display: block;
  text-align: center;
}

.opener-title {
  margin: 3% 0;
}

@media only screen and (max-width: 600px) {
    .opener {
        width: 100%;
        height: 100%;
        min-width: 100%;
        min-height: 100%;
    }

    #opener1::before {
        width: 100%;
        min-width: 100%;
    }

    #opener2::before {
        width: 100%;
        min-width: 100%;
    }

    #opener3::before {
        width: 100%;
        min-width: 100%;
    }

}