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

一个简单的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>

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

查看：

<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>

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

---

您可以在divs上设置

背景图像，而不是
img
。如果您发现图像不适合正方形（非常宽的图像），可以更改为
背景尺寸：cover
。借鉴的想法、工作实例

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%;
}

所以你希望我们为你编程吗？你甚至没有发布一个可能的副本，可能值得在服务器端生成缩略图。同意@MadaraUchiha，否则用户将被迫下载全尺寸图像，这是一种糟糕的体验，尤其是当图像非常大时。这是一种有趣的方法：）将给它一个快照你应该使用
背景尺寸：cover而不是
背景大小：100%否则它只适用于纵横比高于所需图像的图像。我从这口井中找到了第一个答案。@chadocat感谢您提供的信息，更改了答案以反映您的建议