---
title: contentsMode
framework: tvml
role: article
role_heading: Article
path: tvml/contentsmode
---

# contentsMode

Specifies how an image is expanded to fill its containing element.

## Overview

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> important: When using the aspectFit value, you must also include the aspectRatio attribute for the content to scale appropriately. Values Elements That Use contentsMode img

## See Also

### Image Display

- [aspectFill](tvml/aspectfill.md)
- [opaque](tvml/opaque.md)
- [mode](tvml/mode.md)
- [type](tvml/type.md)
- [value](tvml/value.md)