Nathan Nathan - 11 months ago 120
CSS Question

fluid image width, matching height

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 Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download