css - 将 OneDrive 缩略图的比例保持在方框内

Question

在我们的应用程序中，我们显示了 OneDrive 中的共享文件列表。如果它们是图像文件，我们会在 40x40 方形 img 中显示缩略图。我们按照此处的说明获得缩略图预览:http://msdn.microsoft.com/en-us/library/dn659743.aspx#display_a_preview_of_a_onedrive_item

这非常有效，但是，我希望在获得预览时调整其大小以保持其原始比例(最大高度为 40 像素，宽度为 40 像素)。现在缩略图总是变成 40x40，如果它最初是 60x60，这不是问题。但是，当它为 96x72 时，它会显示为适合 40x40。我的 CSS 看起来像这样:

.image {
    float: left;
    width: 40px;
    height: 40px;
    margin-left: 0px;
    line-height: 40px;
    text-align: center;
    vertical-align: middle;
}
.image img {
    display: inline-block;
    border: 1px solid #EBEBE8;
}

我确实相信我可以用 css 做一些事情，以便调整缩略图的大小以保持其原始比例。如果有人能在这方面提供帮助，那将会很有帮助。

谢谢! 斯坦尼斯拉夫

Answer 1

不需要在图片中声明宽度和高度，因为高度会根据图片的比例自动调整。

我建议从 .image 中取出高度并在具有属性 overflow:hidden 的缩略图周围包裹另一个 div 元素，以便缩略图保持原始比例，同时仍然适合广场。