css - 图像边框保持 120x120，同时图像保持纵横比

Question

我试图在我的 drupal 7 网站上实现的目标是使所有图像 (120x120) 的文章图像边框保持一定大小，而实际图像本身根据图像样式 (100x100) 进行调整并居中对齐。(我无法提供示例图片，因为我没有 10 个声望点...)

因此，对于肖像图像，高度上限为 100 像素，宽度为宽高比。与横向图像相反，宽度上限为 100 像素，高度为纵横比。

所有灰色边框保持为 120x120 block ，并且不会根据图像大小而变化。

如果您需要我网站上的任何代码来帮助解决此问题，请告诉我。

Answer 1

实现目标的最简单方法是在父级 div 上使用 table-cell 显示属性和 vertical-align: middle，设置了所需的边框、高度和宽度。你的 img 应该将 max-width 和 max-height 属性设置为 100%。所以有这样的 HTML 结构:

<div class="img-container">
  <img src="..." />
</div>

您的 CSS 可以是:

.img-container {
  width: 120px;
  height: 120px;
  display: table-cell;
  vertical-align: middle;
}

.img-container > img {
  max-width: 100%;
  max-height: 100%;
  margin: 0 auto;
  display: block;
}

Codepen 显示结果:http://codepen.io/anon/pen/BpeOzG