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

Question

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

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

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

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

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