# webcomponent image

**URL:** <https://forum.servoy.com/t/webcomponent-image/20841>\
**Category:** Questions\
**Created:** [August 24, 2022, 2:12pm UTC](https://forum.servoy.com/t/webcomponent-image/20841 "2022-08-24T14:12:37Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![alk](https://avatars.discourse-cdn.com/v4/letter/a/94ad74/32.png) [@alk](https://forum.servoy.com/u/alk)\
**Post date:** [August 24, 2022, 2:12pm UTC](https://forum.servoy.com/t/webcomponent-image/20841/1 "2022-08-24T14:12:37Z")

</div>

Hi,  
in servoy 22.06 I am using the bootstrap component ‘image’,

Since I am displaying images in different sizes sometimes the images is too large and covers other components.  
I am looking for an image method or an option like “reduce”, fix sizes of the image - can’t find

Any idea?  
Best  
Ralf

---

<div class="post-metadata">

**Author:** ![mboegem](https://yyz2.discourse-cdn.com/flex010/user_avatar/forum.servoy.com/mboegem/32/4399_2.png) [@mboegem](https://forum.servoy.com/u/mboegem)\
**Post date:** [August 24, 2022, 2:58pm UTC](https://forum.servoy.com/t/webcomponent-image/20841/2 "2022-08-24T14:58:22Z")

</div>

Hi Ralf,

just add a style class to the component.  
Then in your stylesheet do something like this:

```auto
.my-image {
   width: 20px;
   height: 20px;
}

```

Hope this helps

---

<div class="post-metadata">

**Author:** ![alk](https://avatars.discourse-cdn.com/v4/letter/a/94ad74/32.png) [@alk](https://forum.servoy.com/u/alk)\
**Post date:** [September 7, 2022, 1:06pm UTC](https://forum.servoy.com/t/webcomponent-image/20841/3 "2022-09-07T13:06:46Z")

</div>

Hi Marc

thanks that helps.

But you still have to chooce a width which is suitable to your highst size -  
there seems no function to enlarge, scale the image  
But maybe ‘once upon the time’

Best and greetings from Berlin

Ralf

---

<div class="post-metadata">

**Author:** ![mboegem](https://yyz2.discourse-cdn.com/flex010/user_avatar/forum.servoy.com/mboegem/32/4399_2.png) [@mboegem](https://forum.servoy.com/u/mboegem)\
**Post date:** [September 7, 2022, 1:33pm UTC](https://forum.servoy.com/t/webcomponent-image/20841/4 "2022-09-07T13:33:48Z")

</div>

Hi Ralf,

if you can have either width or height fixed, you can set the other value to ‘auto’.  
Besides you can use the object-fit property, to control resizing.

So something like this, considering the height to be fixed:

```auto
.my-image {
   width:auto;
   height: 120px;
   object-fit: contain;
}

```

You can also have a read here about image sizing:  
[https://www.digitalocean.com/community/ … object-fit](https://www.digitalocean.com/community/tutorials/css-cropping-images-object-fit)

Hope that helps

---

<div class="post-metadata">

**Author:** ![alk](https://avatars.discourse-cdn.com/v4/letter/a/94ad74/32.png) [@alk](https://forum.servoy.com/u/alk)\
**Post date:** [September 8, 2022, 2:41pm UTC](https://forum.servoy.com/t/webcomponent-image/20841/5 "2022-09-08T14:41:20Z")

</div>

Marc

again: thanks

Ralf