CSS - how to make image container width fixed and height auto stretched

Question

I've go some html code like this:

 <div class="item">     <img src="...">  </div> 

And css code like this:

img {     max-width: 100%;     height: auto; }  .item {     width: 120px;     height: 120px;     height: auto;     float: left;     margin: 3px;     padding: 3px; } 

What I would like to do is to make the img display using the div's width and stretch its height. I also want the div stretch itself to fit the img. Is that possible?

Answer 1

What you're looking for is min-height and max-height.

img {     max-width: 100%;     height: auto; }  .item {     width: 120px;     min-height: 120px;     max-height: auto;     float: left;     margin: 3px;     padding: 3px; }