Fit a static image to the screen

0
I’m trying to fit a static image to the home screen using image widget. I’ve set the width unit in % and the value is 100, and the height unit is set to Pixels and the value is 750. This sets the picture to fit the page without any scroll bars. But the picture is stretched width wise. Tried changing the Height unit to % and the value to 100, the picture appears normal but scroll bars appear on the right side(height wise). The picture fits perfectly width wise but unable to set it to adapt to height automatically. 
asked
3 answers
1

Hi Senthil,

For fitting a image to a screen firstly create a blank layout and for the blank layouts scroll container add a class example:test

now extend the test class with mx-scrollcontainer-wrapper as

.test.mx-scrollcontainer-wrapper{

overflow:hidden;

}

now create a page based upon that layout and add the image widget to it make sure you give padding:0px for the layout grid here you will not see any whitespaces in the screen and add a class for the image widget and add the properties as height:100vh and width:100vw;

.imgtest .img{

height:100vh;

width:100vw;

}

 

this will work.

answered
0

Hi, if you want the image as a background, not stretched and no scrollbar than it is more than just width and height, you might want to go to stackoverflow for this because it seems a generic CSS issue and not a mendix platform thing. 

https://letmegooglethat.com/?q=CSS+background+image+no+scrolling

answered
0

Hi Senthil, 

 

I believe you want to add image as a background. You can add that image in the img folder of your project and then you can style your page property as follows: 

 

 

Above, I’ve added position as right as it was my requirement. In case if you have other orientation, you can make changes accordingly. I’d recommend you to try it once as it will help you a lot. This will ensure that there will be no need to use static image widget. 

 

Hope this helps. 

 

Regards, 

 

Ashish

answered