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

Question

我在多个地方加载图片,其中网站主题将以不同的尺寸显示它们.我尝试了CSS属性,发现我可以使用height和width参数缩放图像,并使用position:relative和overflow:hidden来裁剪图像.

我想做的是这样的组合.向下缩放图像,直到宽度为容器元素的宽度,或者高度是容器元素的高度(首先出现).然后裁剪剩下的.

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

有任何想法吗？

奇妙

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 生活更轻松。

希望这能让您走上正轨。