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/
