html - 在响应式方形 div 中垂直居中图像

Question

我正在尝试将图像置于响应式缩放的 div 中，并且始终为正方形。

JSFiddle

感谢出色的 CSS-only option here，我让 always-square 部分正常工作.

CSS:

.thumbnail_container {
    position: relative;
    width: 25%;
    padding-bottom: 25%;
    float:left;
}

.thumbnail {
    position:absolute;
    width:100%;
    height:100%;
    text-align:center;
}

HTML:

<div class="thumbnail_container vcenter-ext">
  <div class="thumbnail vcenter-int">
      <img src="http://placehold.it/200x300" />
  </div>
</div>

div 中的 v-align 通常非常简单:

.vcenter-ext { display: table;}
.center-int { display: table-cell; vertical-align: middle;}

但最后，我似乎无法将它们一起使用......任何人都可以指出我的问题吗？!？

Answer 1

要解决您的问题，您必须删除 display: table; 和 display: table-cell; vertical-align: middle; 并且必须添加:

.thumbnail img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

将您的图像垂直居中。 This article解释我使用的方法(绝对定位和拉伸(stretch))。

注意:我的代码能正常工作是因为 .thumbnail，img 标签的父级，有一个 position: absolute属性。

你可以看看this fiddle查看结果。