CODEWITHSUNDEEP
csscentering
winchendonsprings
winchendonsprings

Reputation: 491

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

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.

Upvotes: 0

Views: 82

Answers (3)

matt2k12
matt2k12

Reputation: 23

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);  
}

Upvotes: 1

Johannes
Johannes

Reputation: 67738

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

Upvotes: 1

G-Cyrillus
G-Cyrillus

Reputation: 105853

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>

Upvotes: 1

Related Questions