css - 如何使用 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

看笔 egQrZj通过 winchendonsprings ( @winchendonsprings ) 在 CodePen .

Answer 1

将以下 CSS 添加到现有的 CSS。它使 .single-piece DIV 和 img 100% 高，将图像移动到水平中间(使用 margin-left: 50%)并将其移回左侧由其自身宽度的 50%。这将适用于比容器窄的图像(左侧和右侧留有空白)和更宽的图像( overflow 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