jquery - 使用 css 和/或 jquery 智能调整图像大小

Question

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

1. 图像不得超过其原始尺寸
2. 图像可能不会改变比例
3. 图像应在剪切（溢出：隐藏）它的框中垂直和水平居中。

或多或少，我正在尝试制作图像，填充容器，但前提是它可以不改变比例或拉伸，显然它必须检查图像的高度和宽度以及它的原始大小，但我没有知道该怎么做，有人可以帮忙吗？

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

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

溢出将具有固定的高度和宽度，仅根据屏幕尺寸而变化，并且会“剪切”图像。

http://jsfiddle.net/Xzzks/

香农

Answer 1

我已经更新了小提琴。

http://jsfiddle.net/Xzzks/1/

主要变化

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

希望这可以帮助。