How to dynamically resize images using CSS when changing browser width / height?

Question

I wonder how I could resize the image along with the browser window, here is what I have done so far (or download the entire site in ZIP ).

This works well in Firefox, but it has problems in Chrome: the image does not always resize, it somehow depends on the size of the window when loading the page.

This also works well in Safari, but sometimes the image loads with a minimum width / height. Perhaps this is due to the size of the image, I'm not sure. (If it boots normally, try updating several times to see the error.)

Any ideas on how I can make this more bulletproof? (If I need JavaScript, I can live with that too, but CSS is preferable.)

Answer 1

This can be done using pure CSS and does not even require media queries.

To make the images flexible, just add max-width:100% and height:auto . The image max-width:100% and height:auto works in IE7, but not in IE8 (yes, another strange IE bug). To fix this, you need to add width:auto\9 for IE8.

source: http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

CSS:

 img { max-width: 100%; height: auto; width: auto\9; /* ie8 */ } 

And if you want to apply a fixed maximum image width, just put it in a container, for example:

 <div style="max-width:500px;"> <img src="..." /> </div> 

JSFiddle example here . No JavaScript needed. Works in the latest versions of Chrome, Firefox and IE (that's all I tested).

Answer 2

 window.onresize = function(){ var img = document.getElementById('fullsize'); img.style.width = "100%"; }; 

In IE, onresize event is fired every time a pixel changes (width or height), so a performance issue may occur. Reduce the image size in a few milliseconds using javascript window.setTimeout ().

http://mbccs.blogspot.com/2007/11/fixing-window-resize-event-in-ie.html

Answer 3

Set the resize property to. Then you can change the width and height as follows:

 .classname img{ resize: both; width:50px; height:25px; } 

Answer 4

Do you use jQuery?

Because I quickly searched in jQuery plugins, and they seem to have a plugin for this, check this, you need to work:

http://plugins.jquery.com/project/jquery-afterresize

EDIT:

This is a CSS solution, I just add style = "width: 100%" and it works for me, at least in Chrome and Safari. I do not have i.e. So just check there and let me know, here is the code:

  <div id="gallery" style="width: 100%"> <img src="images/fullsize.jpg" alt="" id="fullsize" /> <a href="#" id="prev">prev</a> <a href="#" id="next">next</a> </div> 

Answer 5

You can use the CSS3 scale property to resize the image using css:

 .image:hover { -webkit-transform:scale(1.2); transform:scale(1.2); } .image { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } 

Further reading :

• CSS3 2D Transforms
• CSS3 Hover Effect Transitions, Transformations, Animations

Answer 6

At first, I used the following html / css:

 img { max-width: 100%; height: auto; width: auto\9; /* ie8 */ } 

 <div> <img src="..." /> </div> 

Then I added class="img" to the <div> as follows:

 <div class="img"> <img src="..." /> </div> 

And everything began to work fine.