在Internet Explorer中使用max-width和max-height缩放图像

15

我正在创建一个图库,展示多种格式的图片(宽、方和高)在一个固定的空间内。理想的解决方案是让所有的图片尺寸都相同,但这是不可能实现的。

我使用了max-width和max-height的组合来确保图片在有限的空间内正确缩放。唯一的问题在于Internet Explorer,因为它无法理解这些属性,所以会以max-width和max-height的宽度和高度来显示图片。

我一直在寻找解决这个问题的各种方法,但还没有成功(目前为止)。该图库使用jQuery和Galleriffic,除了max-width/max-height问题之外都很好用。

有什么建议吗?

编辑:看起来问题在于Internet Explorer处理图片的max-height和max-width方式不正确,导致图片不能正确缩放。

编辑2:我进行了一些测试,IE的问题不在于max-width和max-height,它们正常工作(确保图片大小不会超过设置的值),例如:

max-width: 600px; max-height: 600px;

会确保图片不会变得比这两个值更大。问题在于图片没有正确缩放,所以高图片看起来被压扁了,宽图片看起来被拉伸了。我切换了IE7兼容模式,图片正常显示,但在IE8中,它们看起来被压扁或拉伸了(这意味着这是IE8的问题)。


http://stackoverflow.com/questions/2786806/max-widgth-and-max-height-solution-in-internet-explorer - Jeff Rupert
我已尝试了那些解决方案,但似乎它们并没有起作用。 - johneth
请更具体地说明问题,特别是您所谈论的IE版本。这些属性在IE 7及以上版本中应该可以正常工作。 - Pekka
我进行了一些测试,IE的问题不在于max-width和max-height,它们是有效的(确保图像不会变得比设置的更大,例如max-width: 600px; max-height: 600px;),而是图像缩放不正确,因此高图像将出现扁平化,宽图像将被拉伸。我打开了IE7兼容性视图,图像显示正确,但在IE8中,它们会出现扁平化/拉伸(这意味着这将是IE8的问题)。 - johneth
你是否在某个地方强制设置了图像的宽度或高度?否则,纵横比在任何浏览器中都不应该被破坏。你可以使用IE8的元素检查器(按F12键)来查看应用于元素的CSS规则。 - Pekka
1个回答

37

您是否尝试过使用height:auto和width:auto,并使用max-height和max-width,这通常会导致IE呈现正确的宽高比。


我遇到了这个问题,有点小变化,但是这个方法解决了。谢谢! - Michael Warkentin
如果您需要设置百分比宽度(例如90%而不是100%),您需要使用一个div来包含图像。IE8似乎不允许百分比宽度和最大/最小宽度同时存在。 - Ed Kirk
2
谢谢,这也为我解决了问题。IE太烂了,也许如果我们经常这么说,他们就会开始构建一个好的浏览器。 - staccata
谢天谢地。我喜欢StackOverflow这样的地方,因为可以找到一些小技巧。头疼不见了。 - ChaseMoskal
在2017年,IE11仍然存在:https://dev59.com/g1gR5IYBdhLWcg3wT7xM#43227016 - benzkji

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接