Resize-scale

From Frontal Wiki

Purpose

This style determines how an object with intrinsic dimensions (an image or a video) is fit into a rectangle of arbitrary dimensions.

Value

One of "showmost", "showall", "stretch" or "none".

resize-scale: showmost;

Remarks

This style helps resolve the issue of how to display content that has some intrinsic dimensions within an arbitrary rectangle. Imagine that we have an image that is 800x600 pixels and we want to show this in a 200x300 rectangle. We could do one of the following:

• Show a 200x300 rectangle of pixels from the original image. This would be done by setting resize-scale to "none". Note that in this case, some of the image would be cropped.
• Shrink the image as much as possible such that the 200x300 rectangle is completely filled. This would be done by setting resize-scale to "showmost". Note that in this case, some of the image would be cropped but only horizontally or vertically and not both.
• Shrink the image such that it just fits into the 200x300 rectangle. This would be done by setting resize-scale to "showall". Note that in this case, the image would not be cropped but the 200x300 rectangle would not be completely filled.
• Distort the image to exactly fit the 200x300 rectangle. This would be done by setting resize-scale to "stretch". Note that in this case, the image would not be cropped but would be distorted.

Note that the previous discussion can also be applied to placing small images into larger containers; just read "shrink" as "expand."

We use resize-scale-origin to position a cropped image within a rectangle. We can also use scrollLeft and scrollTop.

Example

<style><![CDATA[
	img
	{
		border-width: 1px;
		border-color: orange;
		width: 200px;
		height: 300px;
	}
	input[type=checkbox]
	{
		width: 200px;
		margin-bottom: 10px;
		@onFirstRender
		{
			addListener ( input, flash.events.Event.CHANGE, 
				function ( event )
				{
					gE ( "image" ).sS ( "overflow", value ? "hidden" : "visible" );
				} );
		}
	}
	input[type=select]
	{
		width: 200px;
		@onFirstRender
		{
			addListener ( input, flash.events.Event.CHANGE, 
				function ( event )
				{
					gE ( "image" ).sS ( "resize-scale", value );
				} );
		}
	}
]]></style>
<input type="select">
	<item value="none">resize-scale: none;</item>
	<item value="showmost">resize-scale: showmost;</item>
	<item value="showall">resize-scale: showall;</item>
	<item value="stretch">resize-scale: stretch;</item>
</input>
<input type="checkbox"><![CDATA[overflow: hidden;]]></input>
<img id="image" src="http://www.frontalcode.com/assets/images/image_13.jpg" />

See Also

• resize-scale-origin

Can Be Applied To

This style can be applied to:

• img
• video