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

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

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

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

有任何想法吗？

奇妙

我不完全确定您要做什么，但这里有一些指导，可以帮助您仅使用 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 生活更轻松。

希望这能让您走上正轨。