我怎样才能使用 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 {

}

参见下面的代码笔

见笔egQrZj by winchendonsprings (@winchendonsprings) on CodePen.

Answer 1

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

.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

为您的 div 填充 img 元素

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

我怎样才能使用 css 来填充 IMG 的 DIV 高度并使 IMG 居中？

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

css

centering