> For the complete documentation index, see [llms.txt](https://design-packs.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://design-packs.gitbook.io/docs/fundamentals/block-settings/size-controls-for-image-and-video-blocks.md).

# 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