CSS FireFox 图像容器保持纵横比

Question

我有一个用于指定高度 (80px) 的图像缩略图的水平容器，容器中有几个这样的缩略图:

<div class="thumbnail-container fullHeight">
   <img class="fullHeight" />
</div>

和CSS:

.thumbnail-container {
   display: inline-block;
   margin-right: 3px;
   vertical-align: top;
   overflow: hidden;
   position: relative;
   cursor: pointer;
}
.fullHeight {
   height:100%;
}

现在的问题是，仅在 FF 中，容器保持宽高比，因此如果图像原始大小为 300x168 像素，它会调整为 143x80 像素，但容器保持宽度为 300 像素。

这是它在所有其他浏览器和 FF 中的截图。

注意里面没有padding。

Answer 1

一种解决方法是设置固定的宽度和高度，这样图像大小就不会从一个浏览器更改为另一个浏览器，为此您必须添加以下内容:

.thumbnail-container {
   display: inline-block;
   MARGIN-right: 3px;
   vertical-align: top;
   overflow: hidden;
   position: relative;
   cursor: pointer;
}
.fullHeight {
   width:300px;//added
   height:168px;//added
}