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

Posted 2023-02-25

【中文标题】缩放图像直到 X 或 Y 与容器相同，然后裁剪其余部分

【英文标题】：Scale image until either X or Y is the same as the container and then crop the rest

【发布时间】：2011-03-21 17:55:36

【问题描述】：

我在多个位置加载图像，站点主题会将它们以不同的尺寸显示。我尝试了 CSS 属性，发现我可以使用 height 和 width 参数缩放图像，并使用 position:relative 和 overflow:hidden 裁剪图像。

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

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

有什么想法吗？

太棒了

【参考方案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的height和width属性可以使用%。在您的设计中使用 % 非常适合提供灵活性。这当然会强制图像为父容器的任何大小。因此，如果父容器的纵横比不正确，则会使图像变形。

为了保持纵横比，您需要提前知道要扩展的尺寸，并且只在 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>

以上内容将确保图像不会针对大于 50 像素的容器展开，但会针对小于 50 像素的任何容器缩小。

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

希望这能让你走上正轨。

【参考方案2】：

更简洁地改写您的问题；您想将图像缩放到 fill 它的容器元素。目前仅使用 CSS3 无法做到这一点，但 Christian Varga 使用 jQuery 完美地实现了它：

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

【参考方案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;