Resize-scale-origin

From Frontal Wiki

Jump to: navigation, search

Contents

Purpose

This style determines how an object scaled with resize-scale is placed within its bounding rectangle.


Value

One of "left", "center" or "right" and / or one of "top", "middle" or "bottom". The default is effectively "top left". 

resize-scale-origin: center middle;


Remarks

When resize-scale is used to scale and crop an image or video based on a containing rectangle, there are instances where it is ambiguous what the offset of the reuslt should be. This style mitigates that issue by giving some control to that placement.

See also the scrollLeft and scrollTop properties.


Example

<style><![CDATA[
	document
	{
		scroll: auto;
	}
	img
	{
		border-width: 1px;
		border-color: orange;
		width: 200px;
		height: 300px;
		overflow: hidden;
		resize-scale: showmost;
	}
]]></style>
<img style="resize-scale-origin: top left;" src="http://www.frontalcode.com/assets/images/image_13.jpg" />
<img style="resize-scale-origin: center middle;" src="http://www.frontalcode.com/assets/images/image_13.jpg" />
<img style="resize-scale-origin: bottom right;" src="http://www.frontalcode.com/assets/images/image_13.jpg" />
<img style="resize-scale-origin: right;" src="http://www.frontalcode.com/assets/images/image_13.jpg" />
<img style="resize-scale-origin: bottom;" src="http://www.frontalcode.com/assets/images/image_13.jpg" />


See Also


Can Be Applied To

This style can be applied to:

Retrieved from "http://www.frontalcode.com/wiki/index.php/Resize-scale-origin"
Personal tools
Get Adobe Flash player