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

请参阅egQrZj上的winchendonsprings（@winchendonsprings）上的笔CodePen。

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，并通过{{1}将其置于两个轴的中心位置}或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 */
}

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

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

3 个答案: