Is there any way to get the (div.image or li.image) to shrink to the
size (+margin/padding) of the contained image without adding another
class to the div?
I would like to keep the img in a div.file so I can keep all imgs the
same size without distortion. Explanation: Not all images are 72x72.
Some are 72x125, 120x72, etc, but my point is they all have an original
minimum with or height of 72. If this works the way im hoping it could,
all the images would be the exact same size with no image distortion,
just hiding the excess.
I could just replace the div.image with a table and set the width to
1%, but im wondering if theres a way to do this without tables.
Thanks for any suggestions! -Nick
<style>
..images li {
float: left;
}
..image {
border: 1px solid #999999;
padding: 10px;
margin: 0px 14px 14px 0px;
}
..thumb {
width: 72px;
height: 72px;
overflow: hidden;
}
</style>
<!-- Single image -->
<div class="image">
<div class="file thumb"><img src="image.jpg"></div>
<div class="title">Image Title</div>
<div class="description">Some image description text...</div>
</div>
<!-- Multiple images -->
<ul class="images">
<li class="image">
<div class="file thumb"><img src="image.jpg"></div>
<div class="title">Image Title</div>
<div class="description">Some image description text...</div>
</li>
<li class="image">
<div class="file thumb"><img src="image.jpg"></div>
<div class="title">Image Title</div>
<div class="description">Some image description text...</div>
</li>
<li class="image">
<div class="file thumb"><img src="image.jpg"></div>
<div class="title">Image Title</div>
<div class="description">Some image description text...</div>
</li>
</ul>