在HTML/CSS中以最小宽度/高度在HTML中缩放图像只有

我必须在页面中显示一堆图像。图像大小不一，有些很宽，有些很薄。我想把它们都放在一个固定宽度和固定高度的容器中。在HTML/CSS中以最小宽度/高度在HTML中缩放图像只有

放置图像的逻辑应该是这样的：如果图像小于容器，则将其缩放到最大尺寸，以保持纵横比，并将其放在容器的中心。如果图像较大，则在保持纵横比的同时将其缩小。

一些示例：说我们的容器是150x150，我们有一个图像大小为100x50。在这种情况下，图像应该放大到150x75。如果我们有一个大小为100x300的图像，图像应该缩小到50x150。

虽然这可以很容易地完成与JavaScript，我想避免，如果可能的话。我想知道是否有任何方法可以单独使用CSS来完成此任务。只要它适用于Chrome，Firefox和Safari的最新版本（如果没有其他选择，我将使用IE的回退功能），我就可以使用CSS3 only解决方案，甚至可以使用webkit/firefox特定指令。

编辑：我当然知道最大高度和最大宽度。问题是，如果我将max-height和max-width都设置为150，如果需要，图像将不会放大。

来源

2012-08-01 yby

检查此问题：http://stackoverflow.com/questions/5218382/resize-an-image-in-proportion-with-css-is-it-possible – jackJoe 2012-08-01 21:42:42

我做到了。但请注意，我的要求有点不同，显然无法单独使用最大高度和最大宽度。这是因为如果使用set max-height和max-width设置为150，则图像将缩小，但如果需要则不会放大。 – yby 2012-08-01 21:46:12

我希望他们能，我也有你的问题，并找不到一个CSS唯一的解决方案。 – jackJoe 2012-08-01 21:47:28

请勿使用<img>。相反，使用background-image风格：

background: transparent url('path/to/image.png') no-repeat scroll center center; 
background-size: contain;

的background-size确实神奇，缩放图像向上或向下，使其紧贴在容器内适合。

来源

2012-08-01 22:01:25

不错！像魅力一样工作.. – yby 2012-08-01 22:12:48

但是想知道，如果背景图像被破坏，是否会引发误报？如果不是，我不确定我能否替换标签。 – yby 2012-08-01 22:14:23

不，它不会触发'onerror'，但你可以尝试在JavaScript中加载图像（'var img = new Image（）; img.src = ...; img.onerror = ...;'），其中可能包括循环依次通过缩略图。 – 2012-08-01 22:15:49

看看这个小提琴http://jsfiddle.net/demchak_alex/FazvX/3/

虽然这仅适用，如果你可以申请类单幅图像

编辑：

如果你可以使用背景图片，看看这个小提琴http://jsfiddle.net/demchak_alex/FazvX/4/

“仅添加类的图像”在顶部工作，使用的背景图像在底部工作。

来源

2012-08-01 21:54:16 Xhynk

在HTML/CSS中以最小宽度/高度在HTML中缩放图像只有

回答

相关问题