On 10.07.2012 02:14, Philippe Wittenbergh wrote:
Le 10 juil. 2012 à 00:40, Georg a écrit :
Case: images are resized by max-width, and sinse margin-top is a kind of constant the
images' top stays fixed at original position. What if I want some images to be
repositioned based on their center or any other "internal point" when resized -
as we can do with background images?
Perhaps you can be play with the vertical-align property (although, knowing
you, I suspect it won't give you the control you want…)?
Vertical-align has no effect on block elements, and I want better
control over images defined as block/floats (so, you are perfectly right
:-) ).
...
Can 'calc()' solve the problem, and if so is 'calc()' usable across
browser-land?
Hmm, maybe, I'm not fully picturing what you're attempting. calc() is usable in
IE9 (un-prefixed), partly recent Chrome builds and WebKit nightlies
(Safari.next) and Gecko 2.0+ (the latter two, prefixed).
http://caniuse.com/#feat=calc
OK, I will read up on calc() and run some tests then.
What I want is, as an example, to make a floating image's center point
(50%/50%) stay fixed as the image shrink in width/height during
resizing, instead of its position being guided by its top edge and left
or right edge. That its top edge moves down half way and bottom edge
moves up half way as it shrinks, instead of only its bottom edge moving up.
I can get this effect by tuning an image to its container and use a
negative margin-top in % of container width, but I hate having to tune
images to anything but my own taste - also in size.
Thanks
Georg
______________________________________________________________________
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/
