缩放图像直到 X 或 Y 与容器相同，然后裁剪其余部分

Question

我正在多个位置加载图像，网站主题将以不同的尺寸显示它们。我尝试了 CSS 属性，发现我可以使用高度和宽度参数缩放图像，并使用位置：相对和溢出：隐藏来裁剪图像。

但我想做的是两者的结合。缩小图像，直到宽度等于容器元素的宽度或高度等于容器元素的高度（以先到者为准）。然后裁剪其余部分。

因此，无论形状如何，图像都应该成比例并且填充容器。

有什么想法吗？

奇妙

Answer 1

我不完全确定您要做什么，但这里有一些指导，可以帮助您仅使用 CSS 属性来实现一些图像大小调整和剪切。

下面的代码将根据容器的大小调整图像的大小。

<div id="THE-OUTER-CONTAINER" style="width:100px; height:100px; overflow:hidden;">
<img src="YOUR_PIC.jpg" style="width:100%; height:100%;"/>
</div>

关键是理解img的高度和宽度属性可以使用%。在设计中使用 % 非常有助于提供灵活性。当然，这会强制图像达到父容器的大小。因此，如果父容器的纵横比不正确，图像将会变形。

为了保持宽高比，您需要提前知道要扩展的尺寸，并且仅在 img 标签样式中指定。例如，下面的代码将仅沿着宽度正确调整图像的大小。

<div id="THE-OUTER-CONTAINER" style="width:100px; height:100px; overflow:hidden;">
<img src="YOUR_PIC.jpg" style="width:100%;"/>
</div>

使用上面的内容，如果 YOUR_PIC.jpg 是 200x200 像素，它会将其缩小到 100 像素，并从底部剪掉 100 像素。

如果您希望它在宽度/高度范围内扩展，您可以在 img 上使用“max-width”/“min-width”和“max-height”/“min-height”CSS 属性。将它们设置为您需要的值。然后你会得到这样的结果：

<div id="THE-OUTER-CONTAINER" style="width:100px; height:100px; overflow:hidden;">
<img src="YOUR_PIC.jpg" style="width:100%; height:100%; max-width:50px; max-height:50px;"/>
</div>

上面的代码将确保图像不会因大于 50px 的容器而扩展，但会因任何低于 50px 的容器而缩小。

或者，您可以使用一些 JavaScript 来动态计算尺寸。如果您事先不知道要调整哪个维度的大小，这将很有用。使用 javascript 计算大小，然后相应地设置上述 css 属性。我建议使用 jquery 让你的 javascript 生活更轻松。

希望这能让您走上正轨。

Answer 2

更简洁地改写你的问题；您想要缩放图像以填充它的容器元素。目前仅使用 CSS3 无法完成此操作，但 Christian Varga 使用 jQuery 完美地实现了这一点：

https://christianvarga.com/jquery-resize-image-to-parent-container-plugin/

Answer 3

您可以使用 javascript 和 css。 JavaScript 检查图像高度/宽度，然后应用适当的 css。

Javascript（注意：使用与 jQuery 非常相似的 zeptojs）：

$(window).bind("load", function() {
    $.each($("img"), function(index, item) {
        var image = new Image();
        image.src = item.src;
        if (image.height > image.width) {
            $(item).addClass("resize-x");
        } else {
            $(item).addClass("resize-y");
        }
    });
})

CSS：

.resize-x {width: 64px; height : auto;}
.resize-y {width: auto; height : 64px;}