自动图像使用img最大宽度与浏览器窗口调整大小：100％在Chrome浏览器中工作，但不是IE浏览器，当父div的位置：绝对 [英] Auto Image resize with broswer window using img max-width: 100% works in Chrome but not IE when parent div has position: absolute
问题描述
我正在构建一个响应式网站，我发现自动图像调整大小使用img max-width调整窗口大小：100％在Chrome浏览器中工作，但任何父级或祖先都没有位置：绝对; （有关此技术的信息，请参阅
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
）
<下面的代码可以用来演示或者重现这个问题。您也可以在 http://sketchmotion.com/image-test2/ 上查看。你会注意到，调整浏览器窗口的大小将调整在Chrome中的图像，但不是IE浏览器（我正在运行IE 11）。但是，如果删除以下行：
.mydiv {
position：absolute;
}
您现在可以在Chrome和IE中使用它。
这是没有用的，因为我使用position：absolute;在我的网站上的一些父母的div。我需要我的网站在IE和Firefox工作。
请让我知道如果有解决这个问题，所以我可以得到的图像调整与浏览器窗口。
< html>
< head>
<！ - < link href =/ cssh / ImageTest.css =stylesheettype =text / css>< / link> - >
< style type =text / css>
.mydiv {
position：absolute;
img {
/ ***使用浏览器缩放图像CSS中的窗口对于图像和视频都非常简单。 *** /
/ ***您可以将媒体元素的最大宽度设置为100％，浏览器将使*** /
/ ***图像缩小并展开，具体取决于其容器。 *** /
/ ***保持正确的比例使用自动高度*** /
最大宽度：100％;
height：auto;
width：auto\9; / * ie8 * /
}
< / style>
< / head>
< body>
<！ - - >
< div class =mydiv>
< div class =slides>
< div class =slide>
< / div>
< / div>
< / div>
< / body>
< / html>
试试这个：
.mydiv {
position：absolute;
宽度：100％;
$ b $ p
$ b 我没有解释为什么，但是这是有效的。 ：）
I am building a responsive web site and I am finding that Auto Image resize with broswer window resize using img max-width:100% works in Chrome but not IE and Firefox when any parent or ancestor has position:absolute;
(For information about this technique see
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
)
The following code can be used to demonstrate or reproduce this problem. you can also see this at http://sketchmotion.com/image-test2/. You will notice that resizing the browser window will resize the image in Chrome but not IE (I am running IE 11) . However, if you remove the following lines:
.mydiv{
position: absolute;
}
You will find that it now works in both Chrome AND IE.
This is not helpful since I I use position: absolute; on some of my parent divs on my site. And I need my site to work in IE and Firefox.
Please let me know if there is a work around for this problem so I can get the images to resize with the browser window on my site.
<html>
<head>
<!-- <link href="/cssh/ImageTest.css" rel="stylesheet" type="text/css"></link> -->
<style type="text/css">
.mydiv{
position: absolute;
}
img{
/*** Scaling Images with the Browser Window in CSS is pretty simple to implement for both images and video. ***/
/*** You can set the media element’s max-width to 100 percent, and the browser will make ***/
/*** the image shrink and expand depending on its container. ***/
/*** To maintain the right proportions use auto height ***/
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
</style>
</head>
<body>
<!-- -->
<div class="mydiv">
<div class="slides">
<div class="slide">
<img alt="" src="http://sketchmotion.com/ImagesSM/SM_Slider_1_SketchMotion_w_Sketch.jpg" />
</div>
</div>
</div>
</body>
</html>
解决方案 Try this:
.mydiv {
position: absolute;
width: 100%;
}
I don't have an explanation exactly why, but this works. :)
这篇关于自动图像使用img最大宽度与浏览器窗口调整大小：100％在Chrome浏览器中工作，但不是IE浏览器，当父div的位置：绝对的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
