如何使用 css 用 IMG 填充 DIV 高度并居中 IMG？

Question

如何用 img 填充 div 容器的高度并将 img 居中？

在下面的示例中，我希望狗图片填充容器高度，它必须保持成比例，所以我不在乎它有多宽。

而且我希望狗图片在容器的中心，无论屏幕是多宽。

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 {

}

见下面的codepen

请参阅CodePen 上 winchendonsprings (@winchendonsprings) 的 Pen egQrZj。

Answer 1

将以下 CSS 添加到现有的 CSS。它使.single-piece DIV 和 img 100% 高，将图像移动到水平中间（使用margin-left: 50%）并将其向左移动其自身宽度的 50%。这适用于比容器窄的图像（左右留空白）和更宽的图像（溢出被隐藏）。

.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

Answer 2

您可以覆盖 flex 框并将max-height/max-width 设置为img 并通过margin:auto 或align-items/justify-content 让它在两个轴上居中： center,

示例：

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

Answer 3

编辑：此代码可能会对您有所帮助，它使用 JS 用 img 元素填充您的 div

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