webcomponent image

Questions
1

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

2

Hi Ralf,

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

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

Hope this helps

3

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

4

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:

.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

Hope that helps

5

Marc

again: thanks

Ralf