在div高度内拟合图像，但在保持纵横比

Question

问题

我应该编辑什么才能使图像水平居中，同时适合包含<figure>的高度？

缩略图为75px x 75px。上传的图片可能会有所不同，但通常约为4：3比例，如800px x 600px。

HTML

<figure>
    <img src="">
</figure>

萨斯

figure {
    background-color: #777;
    display: inline-block;
    text-align: center;
    overflow: hidden;
    height: 75px;
    width: 75px;
    vertical-align: top;
    position: relative;
    z-index: 1;
    img {
        position: absolute;
        z-index: 5;
        height: 75px;
        width: auto !important;
        top: 50%;
        left: 50%;
        transform:translate(-50%, -50%);
    }
}

Answer 1

理想方法

执行此操作并获得良好的跨浏览器支持的最佳方法是使用background-image而不是实际的图片代码。看看这个codepen：

https://codepen.io/treyhakanson/pen/eGVVpr

基本上，使用background-size: contain会使图像受到其最大尺寸的约束，同时保持其纵横比，background-position: center会将图像置于其容器中心。

替代方法

如果您无法使用background-image且必须使用img代码，请查看object-fit和object-position属性，其行为类似于background-size和{{ 1}}，但适用于background-position甚至img标记。它有good cross browser support，但不如上述方法好。这个例子已被添加到codepen链接。