How can I use css to fill DIV height with IMG and also center IMG?

Question

How can I fill the div container height with the img and also center the img?

In the example below I want the dog picture to fill the containers height, it must stay proportionate, so I dont care how wide it is.

But also I want the dog picture to be in the center of the container no matter what width the screen is.

HTML

<div class="posts">
  <div class="post">
    <div class="single-piece">
      <a>
        <img src="https://images-na.ssl-images-amazon.com/images/G/01/img15/pet-products/small-tiles/23695_pets_vertical_store_dogs_small_tile_8._CB312176604_.jpg">
      </a>
    </div>
  </div>
  <div class="post">
  </div>
  <div class="post">
  </div>
</div>

CSS

.posts {
  display: flex;
  flex-flow: row wrap;
  align-items: strech;
  align-content: stretch;
  width: 90%;
  margin: 0 auto;
}

.post {
  flex: 0 1 calc(33.33% - 0.666em);
  height: 350px;
  overflow: hidden;
  border: 1px solid red;
  margin-right: 1em;

}
.post:nth-child(3n) {
    margin-right: -1em; //needed for codepen only
  }

img {

}

See codepen below

See the Pen egQrZj by winchendonsprings (@winchendonsprings) on CodePen.

To adapt to the paren div you may want to use the 'inherit' property value. Have a look here: http://stackoverflow.com/questions/14262938/child-with-max-height-100-overflows-parent/14264093#14264093 — Daniel, Feb 10 '17 at 22:33

Johannes · Accepted Answer · 2017-02-10T23:06:29.873

1

Add the following CSS to the existing one. It makes the .single-piece DIV and the img 100% high, moves the images into the horizontal middle (using margin-left: 50%)and moves it back left by 50% of its own width. This will work both for images which are narrower than the container (leaving blank space left and right) and images which are wider (overflow is hidden).

.single-piece {
  height: 100%;
}
.single-piece a {
  width: 100%;
  overflow-x: hidden;
}

.single-piece a img {
  height: 100%;
  width: auto;
  margin-left: 50%;
  transform: translatex(-50%);
}

http://codepen.io/anon/pen/PWxaYE

edited Feb 10 '17 at 23:06

answered Feb 10 '17 at 22:50

Johannes

64,305
18
73
130

Amazing. I never remember transform property. Thanks! – winchendonsprings Feb 12 '17 at 07:37

score 1 · Answer 2 · answered Feb 10 '17 at 22:53

you may imbricate flex boxes and set max-height/max-width to img and let it center on both axis via margin:auto or align-items/justify-content : center,

example :

.posts {
  display: flex;
  flex-flow: row wrap;
  align-items: strech;
  align-content: stretch;
  width: 90%;
  margin: 0 auto;
}

.post {
  flex: 0 1 calc(33.33% - 0.666em);
  height: 350px;
  overflow: hidden;
  border: 1px solid red;
  margin-right: 1em;
}
/* added */
.post, .single-piece {  
  height: 350px;
  display:flex;
  align-items:center;
  justify-content:center;
}
/* end added */
.post:nth-child(3n) {
    margin-right: -1em; /*needed for codepen only*/
  }

img {
  display:block;/* added  or use vertical-align*/
  max-width:100%;/* added */
  max-height:100%;/* added */
  margin:auto;/* added center-x,y flex-child */
}

<div class="posts">
  <div class="post">
    <div class="single-piece">
      <a>
        <img src="https://images-na.ssl-images-amazon.com/images/G/01/img15/pet-products/small-tiles/23695_pets_vertical_store_dogs_small_tile_8._CB312176604_.jpg">
      </a>
    </div>
  </div>
  <div class="post">
  </div>
  <div class="post">
  </div>
</div>

@GCyrullus This solution seems simple and graceful, except it doesn't grow the image to fit the div vertically. Am I missing something? — winchendonsprings, Feb 12 '17 at 07:19
@winchendonsprings , no you do not, i did not understood this, else i would have proposed something else able to crop your image. (object-fit, clipping without clip() , absolute + text-align) ... — G-Cyrillus, Feb 12 '17 at 13:22

score 1 · Answer 3 · answered May 11 '21 at 18:38

EDIT: this code might help you, it fills your div with img elements using JS

var divParent = document.createElement('div');
divParent.style.cssText = `height:(${dynamicdivheight(x)}cm);width:calc(25mm - 1px);overflow:hidden;`;

 //this loop is for vertical alignment
 for(var i = 0;  divHeight/imgheight > i; i++){
//treat each row separately

//this loop is for horizontal alignment
for(var y=0; divWidth/imgheight > y; y++) {
   if (y == 0) {
      var bgImage = document.createElement('img');
      bgImage.src = "img/Sand.png";
      bgImage.style.width ="1cm";
      bgImage.style.position = "absolute";
      bgImage.style.top = i + "cm"; 
      bgImage.id = `bgImage_${y}`;
   }
   if (y != 0) {
      var bgImage = document.createElement('img');
      bgImage.src = "img/Sand.png";
      bgImage.style.width ="1cm";
      bgImage.style.position = "absolute";
      bgImage.style.left = y + "cm";
      bgImage.style.top = i + "cm"; 
      bgImage.id = `bgImage_${y}`;
   }
   divParent.appendChild(bgImage);  
}

How can I use css to fill DIV height with IMG and also center IMG?

3 Answers3