contentsMode
Specifies how an image is expanded to fill its containing element.
Overview
Use the contentsMode attribute to specify how the image is scaled within its bounding box. Here’s an example that demonstrates the contentsMode attribute in a stackTemplate:
<document>
<stackTemplate>
<banner>
<title>contentsMode</title>
</banner>
<collectionList>
<shelf>
<section>
<lockup>
<img contentsMode="aspectFit" width="600" height="300" aspectRatio="1:1" src="path to images on your server/Car_Movie_200x200.png"/>
<title>aspectFit</title>
</lockup>
<lockup>
<img contentsMode="aspectFitBB" width="600" height="300" src="path to images on your server/Car_Movie_200x200.png"/>
<title>aspectFitBB</title>
</lockup>
<lockup>
<img contentsMode="aspectFill" width="600" height="300" src="path to images on your server/Car_Movie_200x200.png" contentsMode="aspectFill"/>
<title>aspectFill</title>
</lockup>
</section>
</shelf>
</collectionList>
</stackTemplate>
</document>Values
- aspectFit
The image scales to fit in the bounding box using fixed aspect ratio. The output bounding box has the same size as the scaled image, leaving no remaining area. The output bounding box may be smaller than its specified size.
- aspectFitBB
The image scales to fit in the bounding box using fixed aspect ratio. The output bounding box keeps its specified size. Any unfilled area of the bounding box is white.
- aspectFill
The image scales to fill in the bounding box using fixed aspect ratio. Portions of the image may be clipped.