I am building a Responsive Web Design 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 <div> has { p osition: absolute; } ;
(For information about this technique see
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
http://msdn.microsoft.com/en-us/magazine/hh653584.aspx
http://stackoverflow.com/questions/4684304/how-can-i-resize-an-image-dynamically-with-css-as-the-browser-width-height-chang
)
The following code can be used to demonstrate or reproduce this problem. you can also see this athttp://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{ p o sition: absolute; }
You will find that it now works in both Chrome AND IE.
This is not helpful since I I use ; 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.
Thanks
Terry Clancy
>>>>>>>>>>>>>>>>>>
<html>
<head>
<!-- <link href="/cssh/ImageTest.css" rel="stylesheet" type="text/css"></link> -->
<style type="text/css">
.mydiv{ p o sition: 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>
<<<<<<<<<<<<<<<<<<
Terry Clancy