I have a question similar to one once posed elsewhere: http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_22748366.html
I have a div absolutely positioned with overflow: hidden, and I have an image, of unknown pixel size, displayed inside it. I wish for the image to be "cropped" on the left and right, and sized to fit vertically. A key element here is that I will not know in advance what the size of the image actually is. This is what I have now: div.fb-card a.picture { position:absolute; left:166px; top:70px; width:129px; height:170px; overflow: hidden; } div.fb-card img.picture { height:170px; } <a class="picture" href="#" clicktoshowdialog="picture_dialog"> <img class="picture" id="profile_picture" alt="profile photo" src="<%= @facebook_user.profile_photos.first.src_big %>"/> </a> This displays the image vertically scaled but horizontally it is flush left and overflows only on the right. I want it to "overflow" equally on both sides. I tried margin: 0 auto on the image ... didn't work. Is this possible? My fallback is javascript, trying to detect the width of the image, and doing some math and setting a negative margin. Thanks, --simon http://simonwoodside.com ______________________________________________________________________ css-discuss [EMAIL PROTECTED] 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/