Flexbox не содержит целых изображений (CSS)

Question

Я делаю фотопленку со свойствами flexbox для использования собственного сценария слайдера. Проблема в том, что когда я проверяю .film div, он не содержит должным образом целые изображения, например:

Как видите, изображения принадлежат .film div. Тем не менее, он содержит только маленький кусочек изображения. Я хотел бы, чтобы .film div охватывал все изображения.

Есть ли способы решить эту проблему?

Это код:

.outer {
  margin: 0 auto;
  width: 80%;
  overflow: hidden;

}
.film {
  display: flex;
  flex-flow: row;
  justify-content: center;
  width: 100%;
  left: -130%;
  margin-top: 10px;
  flex-grow: 1;
}
.images {
  position: relative;
  display: block;
  width: 50%;
  margin: 0 7.5%;
  flex-shrink: 0;
  padding-bottom: 50%;
  background-color: blue;
  background-image: url('CovercefwM.jpg');
  background-size: cover;
  background-position: center center;
}

    <div class="outer" draggable="false">
      <div class="film" draggable="false">
        <a class="images" href="#" draggable="false">
          <!-- <img src="CovercefwM.jpg" alt=""> -->
        </a>
        <a class="images" href="#" draggable="false">
          <!-- <img src="Coverdefw.jpg" alt=""> -->
        </a>
        <a class="images" href="#" draggable="false">
          <!-- <img src="Covercefw.jpg" alt=""> -->
        </a>
      </div>
    </div>

Answer 1

Я не уверен, что из вашего стиля я полностью понимаю, как вы хотите, чтобы изображения отображались. Если вы установите ширину: 50%; для изображения, и у вас есть 3 из них, чем нет места для всех трех, чтобы вписаться в родительский div (плюс маржа 7,5% для каждого из них). Кроме того, я вижу, что вы хотите, чтобы они были между ними. Вы использовали маржу 7,5%, но вместо этого вы могли бы использовать justify-content: space -ween; на пленке это будет иметь тот же эффект, но лучше. В качестве решения я бы предложил установить ширину: 30%; и вместо этого удалить маржу 7,5% для .images, установив justify-content: space -ween; для .film сделает интервал, который вы хотите. Я надеюсь, что это результат, который вы на самом деле хотели. Вот исправленный css:

.outer {
  margin: 0 auto;
  width: 80%;
  overflow: hidden;

}
.film {
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  width: 100%;
  left: -130%;
  margin-top: 10px;
  flex-grow: 1;
}
.images {
  position: relative;
  display: block;
  width: 30%;
  margin: 0;
  flex-shrink: 0;
  padding-bottom: 50%;
  background-color: blue;
  background-image: url('CovercefwM.jpg');
  background-size: cover;
  background-position: center center;
}

Answer 2

Установите ваши изображения css на:

img {
    display: block;
    width: 100%;
}

Flexbox позаботится обо всем остальном