我正在构建一个响应式网站，我发现自动图像调整大小使用img max-width调整窗口大小：100％在Chrome浏览器中工作，但任何父级或祖先都没有位置：绝对; （有关此技术的信息，请参阅 webdesignerwall/tutorials/responsive-design-with-css3-media-queries ） <下面的代码可以用来演示或者重现这个问题。您也可以在 sketchmotion/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 webdesignerwall/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 sketchmotion/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="sketchmotion/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的位置：绝对
发布评论