CSS IE8 不兼容模式，图片最大宽高：自动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1771176/
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
IE8 non-compatibility mode, image with max-width and height:auto
提问by Jared Henderson
I have an image with this markup
我有一张带有此标记的图像
<img src="wedding_00.jpg" width="900" height="600" />
And I am using CSS to downsize it to 600px width, like so:
我使用 CSS 将其缩小到 600px 宽度，如下所示：
img {
max-width:600px;
height:auto;
}
Can anyone explain why this method works in Compatibility mode, but not in standard mode? Is there a way I can modify my CSS so that it will work in standard mode?
谁能解释为什么这种方法在兼容模式下有效，而在标准模式下无效？有没有办法可以修改我的 CSS 使其在标准模式下工作？
I realize that if I strip out the
我意识到如果我去掉
width="900" height="600"
that it solves the problem, but that is not an option I have.
它解决了问题，但这不是我的选择。
回答by Greg
I'm not sure of the root cause but if you add
我不确定根本原因，但如果你添加
width: auto;
then it works.
那么它的工作原理。
回答by Vicky
set width:inheritfor ie8
width:inherit为 ie8设置
img {
width:inherit; //for ie8
max-width: 100%;
height: auto;
}
回答by user545493
Wow, saved me a lot of time there!
哇，在那里节省了我很多时间！
i had a similar problem with an image in position: absolute where width was magically taking max-width value. Its weird because it doesn't do that when the image wasn't in position: absolute.
我有一个类似的问题，图像位置：绝对宽度神奇地采用最大宽度值。这很奇怪，因为当图像不在位置时它不会这样做：绝对。
width: auto;
max-width: 200px;
height: auto;
max-height: 200px;
works great in IE8!
在 IE8 中效果很好！
回答by Russell Shingleton
Wow, what a pain IE always seems to be. Although there is an accepted answer, I found that it did not solve my problem.
哇，IE 似乎总是很痛苦。虽然有一个公认的答案，但我发现它并没有解决我的问题。
After much search I found that the way to fix it is to remove the height and width attributes from the images in question. An explanation can be found here: Scaling Images in IE8 with CSS max-width
经过多次搜索，我发现修复它的方法是从相关图像中删除高度和宽度属性。可以在此处找到解释：Scaling Images in IE8 with CSS max-width
The code is as follows:
代码如下：
CSS:
CSS：
.entry img {
max-width:615px
height:auto;
}
SCRIPT
脚本
var imgs, i, w;
var imgs = document.getElementsByTagName( 'img' );
for( i = 0; i < imgs.length; i++ ) {
w = imgs[i].getAttribute( 'width' );
if ( 615 < w ) {
imgs[i].removeAttribute( 'width' );
imgs[i].removeAttribute( 'height' );
}
}
Now I tend to use jQuery as much as possible, to solve this I used a few different functions to target IE8 and make my life easier. I also found that the solution almost worked, but not quite. I toyed around with it until I was able to achieve the results I was looking for. My solution is as follows:
现在我倾向于尽可能多地使用 jQuery，为了解决这个问题，我使用了一些不同的函数来定位 IE8，让我的生活更轻松。我还发现该解决方案几乎有效，但并不完全有效。我一直在玩弄它，直到我能够达到我想要的结果。我的解决方案如下：
JQUERY:
查询：
var maxWidth = 500;
function badBrowser(){
if($.browser.msie && parseInt($.browser.version) <= 8){
return true;
}
return false;
}
if(badBrowser()){
$('img').each(function(){
var height = $(this).height();
var width = $(this).width();
if (width > maxWidth) {
var ratio = (maxWidth /width)
$(this).css({
"width":maxWidth,
"height":(ratio*height)
});
$(this).removeAttr('width');
$(this).removeAttr('height');
}else{
$("#cropimage").css({
"width":width,
"height":height
});
}
});
}
I use this to target a specific image load function, but it could be added to any document ready or window load function as well.
我使用它来定位特定的图像加载功能，但它也可以添加到任何文档就绪或窗口加载功能中。
回答by Cuong Sky
max-width of images just work fine on IE8 when it's directly wrapper (div) has width.
当直接包装器（div）具有宽度时，图像的最大宽度在 IE8 上工作正常。
Example:
The image in this example is 700px;
The web's width is 900px;
示例：
本示例中的图像为 700px；网页的宽度为 900px；
<div class="wrapper1"><div class="wrapper2"><img style="max-width: 100%;" src="abc.jpg" alt="Abc" /></div></div>
<div class="wrapper1"><div class="wrapper2"><img style="max-width: 100%;" src="abc.jpg" alt="Abc" /></div></div>
if you style:
.wrapper1 { width: 50%; float: left; }// this column's width is 450px max;
if you style:
.wrapper1 { width: 50%; float: left; }// 此列的宽度最大为 450px;
The image still 700px and make the layout broken.
图像仍然是 700 像素，并使布局损坏。
Solution:
.wrapper1 { width: 50%; float: left; }// this column's width is 450px max;
.wrapper2 { width 100%; float: left; }// if it has border or padding, width will smaller 100%
解决方案：
.wrapper1 { width: 50%; float: left; }// 此列的宽度最大为 450px；
.wrapper2 { width 100%; float: left; }// 如果有边框或内边距，宽度会缩小 100%
The the image will fit the column (image = 450px) when resize window smaller, image will smaller based on wrapper2's width.
当调整窗口大小时，图像将适合列（图像 = 450 像素），图像将根据 wrapper2 的宽度变小。
Regards,
Cuong Sky
问候，
Cuong Sky
回答by Andrei
My solution for this issue was:
我对这个问题的解决方案是：
<!--[if IE 8]>
<style>
a.link img{
max-height:500px ;
width:auto !important;
max-width:400px;
height:auto !important;
width:1px;
}
</style>
<![endif]-->
