CODEWITHSUNDEEP
htmlimagecss
Anton Aladzhov
Anton Aladzhov

Reputation: 1

max-width image doesn't expand the parent container

I have image thumbnails floated to the left. The code is as follows:

  <div id="imgContainer">
    <div>
     <a href="#" class="item"><img src="image.png" /></a>
    </div>
   </div>

And here is the css:

#imgContainer div {
   width: 23%;
   float: left;
   padding: 1%;
   position: relative;
}

#imgContainer img {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   max-width: 290px;
}

And the problem is: It stretches the images to 290px only by width. It doesn't seem to affect the height. which results in really stretched thumbnails. I need them to be 290px max width and the height should scale accordingly.

Upvotes: 0

Views: 752

Answers (2)

Andrea Turri
Andrea Turri

Reputation: 6500

Add:

#imgContainer img { height: 100% }

or

#imgContainer img { height: auto }

should be enough.

Upvotes: 0

Barney
Barney

Reputation: 16466

Any dimension that isn't specified should scale automatically, but your images may be inheriting styles that dictates other wise. To revert to automatic scaling height, you should specify the following property for #imgContainer img:

height: auto;

Upvotes: 2

Related Questions