fluid image width, matching height

Question

I am trying (if it is at all possible) to use css to make an image 100% the width of a fluid div, but as the images are square (and will be distorted if not square) I want to be able to match the height to the width... for fluid width I am using:

.img{

  max-width: 100%;

  width: 100%;

  min-width: 400px;

}

which works fine for setting the width on all major browsers, but I just cant figure out how to match the height to the width :/

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

Try throwing in height:auto into your class.

.img{
  max-width: 100%;
  width: 100%;
  min-width: 400px;
  height: auto; // <-- add me
}

As mentioned in the comments though, most browsers should be adjusting and scaling the images correctly. But glad this could help.

fluid image width, matching height

Sign up