# Size Controls for Image & Video Blocks

There are two settings that work together to control the size of your media (images or videos):

### 1. Percentage Size (%)

This percentage determines how much of the available space your media can use:

* 100% allows the media to use all available space (up to the max-width)
* 50% means the media will use half the available space
* 10% means the media will use one-tenth of the available space

### 2. Maximum Width (px)

This sets the largest size your media can be, in pixels:

* Enter a specific pixel value (e.g. 400) to control the exact size
* Leave empty to allow the percentage to control sizing completely

#### How to Achieve Common Sizes

**For a specific fixed size on all screens:**

1. Set Percentage Size to 100%
2. Set Maximum Width to your desired size (e.g. 400px)\
   This ensures your media will be exactly 400px wide on all screens where space allows

**For responsive sizing:**

1. Set Percentage Size to your desired percentage (e.g. 85%)
2. Set Maximum Width to prevent too-large sizes (e.g. 300px)\
   Result: Media will be 85% of container width, unless that would exceed 300px, in which case it stays at 300px

#### Examples

Fixed size:

* Percentage Size: 100%
* Max Width: 40px\
  Result: Media will always be 40px wide

Responsive with maximum size:

* Percentage Size: 50%
* Max Width: 300px\
  Result: Media will be 50% of container width, but never larger than 300px

Large responsive:

* Percentage Size: 80%
* Max Width: (empty)\
  Result: Media will always take up 80% of container width

#### Tips

* For exact sizes, use 100% width and set your desired size as max-width
* For responsive designs, use a percentage width and optionally set max-width to limit maximum size
* Test your settings at different screen sizes
* Remember: Images and videos will maintain their aspect ratio while scaling


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://design-packs.gitbook.io/docs/fundamentals/block-settings/size-controls-for-image-and-video-blocks.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.