CSS 用于在 Internet Explorer 中缩放图像的 max-width 和 max-height
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3642541/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
max-width and max-height for scaling images in Internet Explorer
提问by johneth
I'm in the process of creating a gallery which displays several formats of images (wide, square and tall) in a fixed space. The ideal solution would be to have all the images to be the same dimensions, but this cannot be achieved.
我正在创建一个画廊，该画廊在固定空间中显示多种格式的图像（宽、方形和高）。理想的解决方案是让所有图像具有相同的尺寸，但这是无法实现的。
I'm using a combination of max-width and max-height to ensure that images scale properly to the limited space. The only problem with this is Internet Explorer, which displays images at the max-width and max-height widths and heights (because of it's inability to understand them).
我使用 max-width 和 max-height 的组合来确保图像正确缩放到有限的空间。唯一的问题是 Internet Explorer，它以最大宽度和最大高度的宽度和高度显示图像（因为它无法理解它们）。
I've been looking at various solutions to this problem, but haven't managed to make any of them work (yet). The gallery uses jQuery and Galleriffic, which work fine except for the max-width/max-height issue.
我一直在寻找解决这个问题的各种解决方案，但还没有设法使它们中的任何一个工作（还）。画廊使用 jQuery 和 Galleriffic，除了最大宽度/最大高度问题外，它们都可以正常工作。
Any suggestions?
有什么建议？
Edit:It seems that the problem lies in the way Internet Explorer handles max-height and max-width with images, in that they don't scale correctly.
编辑：似乎问题在于 Internet Explorer 处理图像的 max-height 和 max-width 的方式，因为它们不能正确缩放。
Edit 2:I've done a bit of testing and the problem with IE isn't max-width and max-height, which are working (in that they're making sure the image doesn't become larger than what it's set to), for example:
编辑 2：我做了一些测试，IE 的问题不是最大宽度和最大高度，它们正在工作（因为他们确保图像不会变得比它设置的大）， 例如：
max-width: 600px;
max-height: 600px;
max-width: 600px;
max-height: 600px;
will make sure that the image does not become larger than those two values. The images are not scaling properly, so tall images will appear squashed and wide images will appear stretched. I switched on IE7 Compatibility view and the images displayed correctly, but in IE8, the appear squashed/stretched (which means it'll be a problem with IE8)..
将确保图像不会变得大于这两个值。图像没有正确缩放，所以高的图像会被压扁，宽的图像会被拉伸。我打开了 IE7 兼容性视图，图像显示正确，但在 IE8 中，出现压扁/拉伸（这意味着 IE8 会出现问题）。
回答by O.Foxley
have you tried height:auto and width:auto as well as using max-height and max-width, this usually results in IE rendering the correct aspect ratio.
您是否尝试过 height:auto 和 width:auto 以及使用 max-height 和 max-width，这通常会导致 IE 呈现正确的纵横比。
