# Tricks with image classes

{% hint style="info" %}
If you are just starting out with Kirby, please first check out what is possible with Kirbytext image tag <https://getkirby.com/docs/reference/text/kirbytags/image>.
{% endhint %}

### Image width

You can use inbuilt width classes to contain image width. See available classes <https://www.one.thezero.club/guide/theme-styling/helpful-classes#width>.

**Examples:**

```markup
# The image will take half of parent container
(image: myawesomepicture.jpg class: uk-width-1-2)

# The image will take quoter of parent container
(image: myawesomepicture.jpg class: uk-width-1-4)
```

### Image align

Also, a very useful class is the align class, see available here <https://www.one.thezero.club/guide/theme-styling/helpful-classes#align>.&#x20;

They are best used when combined with image width classes.&#x20;

#### Example when you want to contain image width to half of the parent container width and align it right:

```
# Half of parent container width, and align right
(image: myawesomepicture.jpg class: uk-width-1-2 uk-align-right)
```

#### Example when you want to add an icon or smaller image and align it center:

```
# Quoter of parent container width, and align center
(image: myawesomepicture.jpg class: uk-width-1-4 uk-align-center)
```

### Margin

Your design often needs some control over margin space, and that is when margin classes comes handy <https://www.one.thezero.club/guide/theme-styling/helpful-classes#margin>.&#x20;

```
# Quoter of parent container width, and align center, with bottom margin
(image: myawesomepicture.jpg class: uk-margin-bottom uk-width-1-4 uk-align-center)
```

{% hint style="info" %}
The same classes you can add to the Editor image class option.
{% endhint %}

### Remove the left or right margin

You can make a negative margin (of -40px) to image with the following classes:

```
# Negative margin left
(image: myawesomepicture.jpg class: uk-container-item-padding-remove-left)

# Negative margin right
(image: myawesomepicture.jpg class: uk-container-item-padding-remove-right)
```