智能图像大小与css&/或jquery

我设计了一个“网格视图”来显示我网站上的项目。但是，由于它是完全响应的，因此图像的宽度不能固定。这就是我想要达到的目标

图像不得超出其原始尺寸

图像可能不会改变比例

图像应该在剪切（溢出：隐藏）它的框中垂直和水平居中

或多或少，我在尝试制作图像，填充容器，但只有在不改变比例或拉伸的情况下，才可以。显然，它必须检查图像的高度和宽度以及原始大小，但我不知道如何做到这一点，有人能帮我吗

我在小提琴中提供的当前网格项的简单版本如下：

<div class="container">
    <div class="item"><div class="overflow"><img src="/bla.jpg" /></div></div>
</div>

其中溢出将具有固定的高度和宽度，仅根据屏幕大小而变化，并将“剪辑”图像

---

香农

我已经更新了小提琴

重大变化

.gridItem .itemImage img {
    width:auto;
    /*min-width:100%;
    min-height:100%*/
    max-width:100%;
    max-height:100%
}

---

希望这能有所帮助。

在客户端使用jquery/css调整图像大小不是一个好选择，您需要在服务器端执行

操作，图像比率取决于相应的横向/横向图像。我本来有这个功能，但如果图像足够大，我希望它能覆盖“溢出”容器，剪切图像的一部分。例如，如果有一个高4000px、宽200px的图像，我希望不只是将其放入容器中，而是添加一些smarts，根据高度“剪切”一些图像，但决不拉伸它。