css - CSS FireFox图像容器保持宽高比

我有一个水平容器，用于放置具有指定高度（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像素，但是容器会保持300px的宽度。

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



请注意，内部没有填充。

最佳答案

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

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