Подгонка объекта: заполнить; не работает

Я написал этот отзывчивый код галереи изображений с использованием flexbox

Я установил фоновый стиль каждого flexbox_item на голубой, чтобы показать размеры каждого блока flexbox_item:

background-color: cyan;

Теперь я хочу, чтобы изображения заполняли свои блоки, поэтому я использовал:

object-fit: fill;

Но это не работает!

Я перепробовал много вещей, но фотографии не заполняли их блоки! пожалуйста помоги. вот код:

<!doctype html>
<html>

<head>
<meta charset="utf-8">
</head>

<style>
.main_container {
  position: relative;
  margin: 0 5% 0% 5%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
}

.flexbox_container {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: stretch;
  align-content: stretch;
}

.flexbox_item {
  background-color: cyan;
  flex-basis: 25%;
  object-fit: fill;
}

img {
  vertical-align: middle;
}

</style>

<body>
 <div class="main_container">
  <div class="flexbox_container">
    <div class="flexbox_item">
      <img src="http://oi43.tinypic.com/14ida8p.jpg" style="width:100%" alt="First Photo">
    </div>
    <div class="flexbox_item">
      <img src="http://oi67.tinypic.com/2qd0ms0.jpg" style="width:100%" alt="Second Photo">
    </div>
    <div class="flexbox_item">
      <img src="http://oi39.tinypic.com/xpzzc.jpg" style="width:100%" alt="Third Photo">
    </div>
    <div class="flexbox_item">
      <img src="http://oi64.tinypic.com/2qd0sc0.jpg" style="width:100%" alt="Fourth Photo">
    </div>
    <div class="flexbox_item">
      <img src="http://oi49.tinypic.com/35kick3.jpg" style="width:100%" alt="Fifth Photo">
    </div>
    <div class="flexbox_item">
      <img src="http://oi65.tinypic.com/2qd1hjs.jpg" style="width:100%" alt="Sixth Photo">
    </div>
   </div>
  </div>
</body>

</html>

Источник

2 ответа

Решение

object-fit свойство установлено на div .flexbox_item оборачивая изображения, они фактически заполняют коробки. Но изображения не должны заполнять эти элементы, поэтому они остаются неизменными.

можете добавить width: 100%; height: 100%; к изображениям для этого.

НОТА: fill растянет ваши изображения, если размеры не квадратные, вы можете попробовать с cover чтобы сохранить исходный рацион (изображение обрезается, чтобы заполнить контейнер)

<!doctype html>
<html>

<head>
<meta charset="utf-8">
</head>

<style>
.main_container {
  position: relative;
  margin: 0 5% 0% 5%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
}

.flexbox_container {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: stretch;
  align-content: stretch;
}

.flexbox_item {
  background-color: cyan;
  flex-basis: 25%;
  object-fit: fill;
}

img {
  vertical-align: middle;
  width: 100%;
  height: 100%;
}

</style>

<body>
 <div class="main_container">
  <div class="flexbox_container">
    <div class="flexbox_item">
      <img src="http://oi43.tinypic.com/14ida8p.jpg" style="width:100%" alt="First Photo">
    </div>
    <div class="flexbox_item">
      <img src="http://oi67.tinypic.com/2qd0ms0.jpg" style="width:100%" alt="Second Photo">
    </div>
    <div class="flexbox_item">
      <img src="http://oi39.tinypic.com/xpzzc.jpg" style="width:100%" alt="Third Photo">
    </div>
    <div class="flexbox_item">
      <img src="http://oi64.tinypic.com/2qd0sc0.jpg" style="width:100%" alt="Fourth Photo">
    </div>
    <div class="flexbox_item">
      <img src="http://oi49.tinypic.com/35kick3.jpg" style="width:100%" alt="Fifth Photo">
    </div>
    <div class="flexbox_item">
      <img src="http://oi65.tinypic.com/2qd1hjs.jpg" style="width:100%" alt="Sixth Photo">
    </div>
   </div>
  </div>
</body>

</html>

Источник

Попробуйте использовать background-size: cover

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
</head>

<style>
  .main_container {
    position: relative;
    margin: 0 5% 0% 5%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
  }
  
  .flexbox_container {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: stretch;
    align-content: stretch;
  }
  
  .flexbox_item {
    background-color: cyan;
    flex-basis: 25%;
    object-fit: fill;
  }
  
  img {
    width: 100%;
    background-size: cover;
    object-fit: cover;
    height: 100%;
    overflow: hidden;
    background-attachment: fixed;
    background-position: center;
  }
</style>

<body>
  <div class="main_container">
    <div class="flexbox_container">
      <div class="flexbox_item">
        <img src="http://oi43.tinypic.com/14ida8p.jpg" style="width:100%" alt="First Photo">
      </div>
      <div class="flexbox_item">
        <img src="http://oi67.tinypic.com/2qd0ms0.jpg" style="width:100%" alt="Second Photo">
      </div>
      <div class="flexbox_item">
        <img src="http://oi39.tinypic.com/xpzzc.jpg" style="width:100%" alt="Third Photo">
      </div>
      <div class="flexbox_item">
        <img src="http://oi64.tinypic.com/2qd0sc0.jpg" style="width:100%" alt="Fourth Photo">
      </div>
      <div class="flexbox_item">
        <img src="http://oi49.tinypic.com/35kick3.jpg" style="width:100%" alt="Fifth Photo">
      </div>
      <div class="flexbox_item">
        <img src="http://oi65.tinypic.com/2qd1hjs.jpg" style="width:100%" alt="Sixth Photo">
      </div>
    </div>
  </div>
</body>

</html>

Источник
Другие вопросы по тегам