I’d been wondering if there was a way to crop an image so it fits a defined box without having to create a new thumbnail. Lo and behold, there was a nice solution here. In case the link goes dead, here’s my little version.
HTML:
<div class=”ImageThumbnail”><img src=”/images/whatever.gif”/></div>
CSS (site-specific parts removed):
.ImageThumbnail
{
position: relative;
width: 70px;
height: 70px;
overflow: hidden;
}
.ImageThumbnail img
{
position: absolute;
}
Basically, you’re creating a container with a defined size and overflow set to hidden so anything outside of that size doesn’t get rendered (or counted when laying out the page). Then the image itself is position absolutely within that container. You could also play around with this do to some odd tricks (like making the image centered within a much larger box).
The more I find I need to do with CSS, the more I like it. Now, if the browsers can just get the float crap working smoothly 100% of the time, we’ll be set!
kn
