Search code examples
cssresponsive-designflexboximage-galleryobject-fit

object-fit: fill; does not working

I wrote this responsive image gallery code with using of flexbox

I set background-color style of every flexbox_item to cyan , to show the dimensions of every flexbox_item block :

background-color: cyan;

Now i want images to fill their blocks , so i used :

object-fit: fill;

But it doesn't work!

I tried many things but still images not filling their blocks ! please help . here is the code : 

<!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>

Solution

  • The object-fit property is set on the div .flexbox_item wrapping the images, they actually fill the boxes. But the images are not set to fill these divs, so they stay the same.

    you can add width: 100%; height: 100%; to the images for that.

    NOTE: fill will stretch your images if dimensions are not square, you can try with cover so that the initial ration is kept (image are cropped so they can fill the container)

    <!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>