CODEWITHSUNDEEP
htmlcssresizeimage-resizing
Ahmad
Ahmad

Reputation: 13436

Images not resizing automatically (via CSS) in Firefox and Internet Explorer

I have these images in my webpage, that I want to automatically shrink when the viewport's width is reduced. I am using the following CSS to do this:

.autoResizeImage {
    max-width: 100%;
    height: auto;
    width: auto;
}

The images which I want to resize are of two types:

  1. Ones which are inside td's in a table
  2. Ones which are not inside a table

On Chrome, images of both types shrink automatically when the viewport's width is reduced. However, on Firefox and Internet Explorer at least, this shrinking is only happening for the second type, and not for the first type (a scrollbar appears instead).

JSFiddle: http://jsfiddle.net/ahmadka/raSSq/2/

Notice that the small cell contained images do NOT resize in Firefox/IE, however the banner at the bottom DOES resize.

Can someone figure out what the issue is ?

Upvotes: 2

Views: 9760

Answers (1)

Karl Bishop
Karl Bishop

Reputation: 401

Couple of things:

  1. width:auto; will tend to make the image use its actual width, rather than stretching to fit a larger area. You should use width:100%;

  2. Once your images are set to use 100% of the available area you also need to set your table to use 100% of the available area via width:100%;

Result:

.autoResizeImage {
    max-width: 100%;
    height: auto;
    width: 100%;
}
.imageTable table {
    width:100%;
}

This seems to work as a basic solution for me here: http://jsfiddle.net/5AYWd/1/

Also, if you want the images to stop growing at a certain point, that is when you'd use max-width. You might want to set a max-width on the table as well.

Something like this.

Upvotes: 2

Related Questions