Sent by Lisa Onizuka on 10 April 2008 17:05
Martin, I'm not sure if you want to bother with any inline css, but you
could achieve it this way:
<div class="imagebox"
style="background:url('dynamically-generated-path.jpg') center center
no-repeat"> </div>
div.imagebox {
width: 80px;
height: 80px;
overflow: hidden; }
-Lisa
http://free-ecard-greetings.com
http://cleanwebdesign.com
------
Hi,
I use a <div class="imgbox"> to display thumbnails in a square box.
These thumbnails are of various sizes and aspect ratios (auto-generated by a
CMS), but they all exceed the dimensions of the box. Here's the css:
div.imagebox {
text-align: center;
vertical-align: middle;
width: 80px;
height: 80px;
overflow: hidden }
I want to position them so that their center-portion is displayed, but since
they're bigger not even text-align: center has any effect. All I see is
the upper left corner of the images.
Now all the resources I've found so far deal with the case of the
surrounding div being *larger* than the images. But I got some hints that
might be useful like setting the div's position to relative and using
absolute positioning for the images.
The problem with that is however that I can't use fixed values as the
size/orientation of the thumbnails varies.
Can this be done? Any help would be very much appreciated!
Cheers Martin
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/ List policies --
http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/