Question

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

因此，对于肖像图像，高度将被限制为100px，宽度将是宽高比。与景观图像相反的情况，宽度上限为100px，高度为宽高比。

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

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

Answer 1

实现目标的最简单方法是在父table-cell上使用vertical-align: middle显示属性div，并设置所需的边框，高度和宽度。比你的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

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

1 个答案: