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 :/

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.