# Images

> The image styles described on this page can be used on any image in your Zendesk theme, both within the content area of articles and posts and in broader page layouts.

Source: https://www.zenplates.co/documentation/elements/images (Elements › Content)

## Usage

Use `.img-fluid` to ensure that images scale with the parent element.

```html
<img class="img-fluid w-full" src="..." alt="..." />
```

Images within `.content` sections automatically inherit this style, ensuring that they scale to fit the content area.

### Alignment

Use [float](https://www.zenplates.co/documentation/utilities/float) or [text align](https://www.zenplates.co/documentation/utilities/text-align) utilities to align images.

```html
<div class="clearfix">
  <img class="img-fluid float-left" src="..." alt="..." />
  <img class="img-fluid float-right" src="..." alt="..." />
</div>
```

If you float an image to the left or right within the content of an article, the rest of the content will flow around it.  Use responsive variants of the float utilities if you want to have the images only float to one side on certain screen sizes.

Block-level images can be aligned using [margin](https://www.zenplates.co/documentation/utilities/margin) utilities.

```html
<img class="img-fluid block mx-auto" src="..." alt="..." />
```

If `.ml-auto` were used in the example above, the image would float to the right-hand side.