Question

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

这非常有效，但是，当我得到预览时，我希望保持其原始比例（最大高度为40px，宽度为40px）。现在缩略图总是变成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元素，以便缩略图保持原始比例，同时仍然适合广场。 / p>

Answer 2

经过一些点击和阅读后，我得到了正确的课程。检查下来：

.image img {
   width: auto;
   height: auto;
   max-height: 100%;
   max-width: 100%;
   /* The last two properties center the picture in the middle of the box */
   display: inline;
   float: none;
}

.image {
   float: left;
   margin-left: 0px;
   line-height: 40px;
   text-align: center;
   vertical-align: middle;
   border: 1px solid #EBEBE8;
   /* Down here the frame where the thumbnail will be placed is set */
   width: 40px;
   height: 40px;
}

将OneDrive缩略图的比例保持在方框中

2 个答案: