> For the complete documentation index, see [llms.txt](https://help.craftsmanplus.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.craftsmanplus.com/play/properties/transform/responsivity/scaling.md).
# Scaling
Choose how a layer resizes across screen sizes, including Contain and Cover, which keep a layer inside or filling its parent.
Scaling controls **how a layer resizes** when the screen size changes. You'll find the **Scaling** dropdown in the [**Responsivity**](/play/properties/transform/responsivity.md) section of the Transform panel. New layers use **Keep Shorter**.
The dropdown has two groups:
* **Scale with Screen** options resize the layer based on how much the screen changed.
* **Fit to Parent** options size the layer against the artboard, or the group it sits in.
{% hint style="info" %}
Scaling is set separately for **Portrait** and **Landscape**. Changing it in one tab doesn't change the other.
{% endhint %}
***
### Scale with Screen
**Keep Width**\
Locks the layer's **width** so it doesn't change as the screen changes. The layer keeps its proportions, so its **height adjusts to match**.
**Keep Height**\
Locks the layer's **height** so it doesn't change as the screen changes. The layer keeps its proportions, so its **width adjusts to match**.
**Keep Shorter**\
Scales the layer by whichever screen side changed least, keeping its proportions. The layer never grows past what the shorter side allows. This option was previously called Scale to Fit. Older projects open with Keep Shorter selected and look the same.
**Keep Longer**\
Scales the layer by whichever screen side changed most, keeping its proportions. This option was previously called Scale to Fill. Older projects open with Keep Longer selected and look the same.
**Stretch**\
Stretches the layer so it always keeps the same **Width %** and **Height %** of the screen. Its proportions can change.
***
### Fit to Parent
A layer's parent is the artboard, or the group when the layer is nested inside one.
**Contain**\
Scales the layer, keeping its proportions, until it fits fully inside its parent with nothing cut off. Use it for logos, end cards and anything that must always be visible in full.
**Cover**\
Scales the layer, keeping its proportions, until it fills its parent completely. Anything that extends past the edge of the artboard is cut off. Use it for backgrounds that should never show a gap.
When you select Contain or Cover, the layer snaps to its new size and position right away. It stays contained or covering on every screen size in Preview and in your exports, and re-fits on its own when:
* the group it sits in is resized
* the artboard's ratio changes
* the layer is moved or pasted into or out of a group
* the layer's image is replaced
***
### Positioning with Pin and Anchor Point
In Contain and Cover, the [**Pin**](/play/properties/transform/responsivity/pinning.md) decides where the layer sits inside its parent, and the layer scales from that point. The [**Anchor Point**](/play/properties/transform/responsivity/anchor-point.md) always matches the pin, so changing one changes the other.
| Pin | Where the layer sits |
| --------------------- | ------------------------------------- |
| **Center**, or no pin | Centered in the parent |
| **Top Center** | Against the top edge, centered across |
| **Bottom Right** | In the bottom right corner |
***
### What Switches a Layer out of Contain or Cover
Contain and Cover control the layer's size and position. If you change those yourself, the layer switches to the closest **Scale with Screen** option: Contain becomes **Keep Shorter** and Cover becomes **Keep Longer**. A notification confirms the switch.
| Action | Result |
| --------------------------------------------------------------------- | ------------------------------------------------------------------------- |
| Editing **X**, **Y**, **Width** or **Height** in the properties panel | Switches |
| Moving or resizing the layer on the canvas | Switches |
| Rotating the layer on the canvas | Switches, unless the Anchor Point is **Center** |
| Editing **Rotation** in the properties panel | Keeps Contain or Cover |
| Aligning one unrotated layer | Keeps Contain or Cover. The pin and Anchor Point move to the aligned edge |
| Aligning one rotated layer | Switches |
| Aligning several layers at once | Switches each layer that moves |
{% hint style="info" %}
The switch only applies to the orientation you're editing. If the layer also uses Contain or Cover in the other orientation, that setting stays.
{% endhint %}
***
### How to Change a Layer's Scaling
1. Select a layer.
2. Open the **Responsivity** section and choose the **Portrait** or **Landscape** tab.
3. Open the **Scaling** dropdown.
4. Choose an option:
* **Scale with Screen**: **Keep Width**, **Keep Height**, **Keep Shorter**, **Keep Longer** or **Stretch**
* **Fit to Parent**: **Contain** or **Cover**
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.
Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:
```
GET https://help.craftsmanplus.com/play/properties/transform/responsivity/scaling.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
