CSS：渲染图像时保持纵横比

Question

一个简单的CSS问题：

• 在灰色框中显示动物图片，如下图所示
• 图片尺寸必须为150x150像素
• 但是，我必须保持图像的纵横比，这意味着不是整个图像都适合150x150的正方形。
• 由于大多数图像都会超过允许的150x150尺寸，我想将显示屏聚焦在图像的中间。

一些HTML：

<div class="gallery-item" style="height: 232px;">
                    <img src="/media/animals/images/african-buffalo.jpg" alt="African Buffalo ">

                    <div class="gallery-item-caption">
                        <a href="/animals/african-buffalo" title="African Buffalo ">African Buffalo </a>
                    </div>
</div>

一些CSS：

.gallery-item {
float: left;
padding: 15px 15px 15px 15px;
margin: 15px;
background-color: #ececec;
}

查看：

Answer 1

您可以在div上设置img，而不是background-image。如果您发现图像不适合正方形（非常宽的图像），则可以更改为background-size:cover。摘自here，工作示例here

<强> CSS

.gallery-item{
    width:50px;
    height:50px;
    border:solid 1px #000;
    margin:10px;
    background:url('http://lorempixel.com/100/200') center center no-repeat;
    background-size:100%;
}