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

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

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

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

---

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

实现此目标的最简单方法是在父级

div

上使用

表格单元格

显示属性，并设置所需的边框、高度和宽度。您的img应该将

max width

和

max height

属性设置为100%。因此，具有如下HTML结构：

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

---

代码笔显示结果：

您能添加一个包含html、CSS和假图像的代码段吗？非常感谢您的建议。它几乎解决了这个问题。它似乎对边界起了作用，但图像高度的问题仍然存在。查看底部附近的沉降物图像以获取示例：这是输入到喷油器模块的CSS：

code

。字段类型图像{宽度：140px；高度：140px；显示：表格单元格；垂直对齐：中间；文本对齐：中心；}。字段类型图像>img{最大宽度：100%；最大高度：100%；}这是我输入到注入器模块的CSS：

。字段类型图像{宽度：140px；高度：140px；显示：表格单元格；垂直对齐：中间；文本对齐：中心；}。字段类型图像>img{最大宽度：100%；最大高度：100%；}

您是指图像和边框之间的额外空间吗？如果是这样，原因是默认情况下图像是内联渲染的，这意味着它与字母a、b、c、d等位于同一行上，而这个额外的空间用于字母f、g、y中的下行。要解决此问题，只需添加到

.img container>img

显示：block您的问题将得到解决。在这里，你还可以找到关于下降者的很好的解释：。不，一点也不，额外的空间是我想要的，以保持图像边框的一致性。沉降物图像通过向上推高度打破了这种一致性。我原以为drupal中的图像样式设置会让它保持低调，但它似乎不起作用。除非我做错了什么。@Steve-o要么我没把你弄对，要么是覆盖样式有问题。我在codepen中检查了我的方法，并在我的答案中放置了链接，这样你就可以看到它是否是你想要的结果。但是，在添加
显示：块
后，父级上的
文本对齐：居中
应替换为
边距：0自动。此更改也放置在代码笔中。请看一看，让我知道这是否是一个解决你的问题。
.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;
}