缩放图像，直到X或Y与容器相同，然后裁剪其余部分 [英] Scale image until either X or Y is the same as the container and then crop the rest

问题描述

我在多个地方加载图片，网站主题将以不同的大小显示。我试验了CSS属性，发现我可以使用height和width参数缩放图像，并使用position：relative和overflow：hidden裁剪图像。

I am loading images in multiple places where the site theme will have them displayed in different sizes. I experimented with the CSS properties and found that I could scale the image using the height and width parameters and crop the image using position:relative and overflow:hidden.

想做，虽然是一个组合。要向下缩放图像，直到宽度是容器元素的宽度，或者高度是容器元素的高度（首先是高度）。然后裁剪其余。

What I want to do though is a combination of that. To scale the image down until the width is the width of the container element or the height is the height of the container element (which ever comes first). Then crop the rest.

因此，图片应该按比例填充容器，不管形状如何。

Thus the image should be in proportion and also fill the container, regardless of shape.

任何想法？

奇妙

推荐答案

您想要缩放图像以填充它的容器元素。现在只能使用CSS3，但是Christian Varga使用jQuery实现了它：

To reword your question more succinctly; you want to scale an image to fill it's container element. This can't be done at the moment only using CSS3, but Christian Varga has achieved it beautifully using jQuery:

http://christianvarga.com/blog/2011/05/jquery-resize-image-to- parent-container-plugin /

这篇关于缩放图像，直到X或Y与容器相同，然后裁剪其余部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！