still image size
Question

Hi,


I have a question. I need to have an image on the screen, but I don't want the size of the container to change regardless of the size of the image. More simply, I need the presentation to be a fixed size


Outsystems 11

Capturar.PNG

mvp_badge
MVP
Solution

Hi Lucas,

This is all plain CSS, so googling will get you a long way. See e.g. this (first hit I got).

mvp_badge
MVP

Hello Lucas,

You can define a class with the width and the height that you want in the style sheet (CSS) and apply that class in the container that encloses the image.


Kind regards,

Rui Barradas

Rui Barradas wrote:

Hello Lucas,

You can define a class with the width and the height that you want in the style sheet (CSS) and apply that class in the container that encloses the image.


Kind regards,

Rui Barradas

Hi, Rui

Does it work if I apply this CSS directly to the image? fixing the container he created a scroll bar.


mvp_badge
MVP

Lucas Silva wrote:

Hi,


I have a question. I need to have an image on the screen, but I don't want the size of the container to change regardless of the size of the image. More simply, I need the presentation to be a fixed size


Outsystems 11

Hi Lucas,


you can do like below.

.container {
    width:100px;
    height:100px;
    background-position:center;
}


Thanks Brother, It helped me alot.


mvp_badge
MVP
Solution

Hi Lucas,

This is all plain CSS, so googling will get you a long way. See e.g. this (first hit I got).


when I apply the sizes, the image looks like this, I don't want this bar to be

mvp_badge
MVP

Lucas, did you check the link I posted? Did you set the image's max-width to 100% in CSS?

Kilian Hekhuis wrote:

Lucas, did you check the link I posted? Did you set the image's max-width to 100% in CSS?

Sorry, the post appeared later. I'll check the link.


I applied 100% but continue this bar

mvp_badge
MVP

Can you share a Module with this problem?

Thank you for help! Problem solved!

I was putting the class in another image, Now it worked

mvp_badge
MVP

Ok, great you got it solved! :)

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.