# Image

### **Adding a image to a template**

You can add images to a template by clicking the **+** button in the left side menu under the images tab. As with all element you can remove it by delete button or clicking on the **-** button in the side menu.

![](https://183518148-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MT4xzv1KpJ-qdTnNbSz%2F-MhShACpMqJWwzVuCi0-%2F-MhTITWtuHCdta4W02CG%2FAdrapid%20images%20add%20i%20images%20to%20a%20template%20\(1\).gif?alt=media\&token=71b3d055-01ca-4a31-afe1-a11e012c4926)

### **Image movement**&#x20;

You have the same option when it comes to images that all elements in adrapid have. You can click on it and move it, resize, rotate and so on. <br>

![](https://183518148-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MT4xzv1KpJ-qdTnNbSz%2F-MhShACpMqJWwzVuCi0-%2F-MhTIxUbLGRfOf9B2hSX%2Fadrapid%20moving%20images%20\(1\).gif?alt=media\&token=b7798193-38ba-4cef-9a89-a78064f9c555)

### **Images Advanced options**&#x20;

This are the options that are specific to images.

#### **Contain**&#x20;

This will keep the image inside of the content box and it will scale the image size to fit.  This is good for logos and product images that have a transparent background.

#### **Cover**

This will keep the aspect ratio of the images but it will scale the images to cover the whole content box.&#x20;

#### **Fill**

This will fill the hole content box with the image but not respect the aspect ratio.

![](https://183518148-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MT4xzv1KpJ-qdTnNbSz%2F-MhShACpMqJWwzVuCi0-%2F-MhTLA-wBhlFRiatoYiO%2Fadrapid%20image%20advance%20\(1\).gif?alt=media\&token=ffa6d2c2-1636-4b92-bba2-9f70474d4f63)

#### **Crop**

Crop is an option to remove part of a image not need or to select a specific part and remove the res&#x74;**.**<br>

![](https://183518148-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MT4xzv1KpJ-qdTnNbSz%2F-MhShACpMqJWwzVuCi0-%2F-MhTLghZ_INE4fC-cLJP%2FAdrapid%20image%20crop%20\(1\).gif?alt=media\&token=a25b0714-f0f9-4860-a128-ca456cbbd755)

#### **Images position**&#x20;

With images position we can set  position of the image inside its content box. Object position behaviour can be checked in the following url:\
[**https://interactive-examples.mdn.mozilla.net/pages/css/object-position.html**](https://interactive-examples.mdn.mozilla.net/pages/css/object-position.html)<br>

![](https://183518148-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MT4xzv1KpJ-qdTnNbSz%2F-MhShACpMqJWwzVuCi0-%2F-MhTLvf_7w1ry-50CBE4%2FAdrapid%20image%20position.gif?alt=media\&token=1e70e986-8c7e-482b-a5b8-167f9df5ec33)
