Full browser window responsive image or svg

[aarondawkins]

Hi,

Is it possible to stretch an image or SVG to be full browser height and width? So it warps and is responsive when adjusting the browser window?

I can make a row full browser height and add an image/svg with a margin. But I can't get it to stretch and go full browser height with CSS.

Is this possible? Help!

Thank you.

Best,
Aaron

[arminunruh]

does it have to be a row background image?

In the gridder, right click on the row and choose "set html class and id". For "html class" enter:

myrow

Enter the custom css in "lay options" -> "custom css & html".

.myrow .background-image.background-image-style-normal img{
    object-fit: fill!important;
}

[arminunruh]

and it has to be a browser height row

[aarondawkins]

Thanks! That works with an image.

Can it work with an SVG? Also, it doesn't need to be a row background image ... is there a better way?

[aarondawkins]

Also, is it possible to add a padding? Thank you for your help!

[arminunruh]

sure just try to add the svg as the background does that work?

with space around maybe this?

.myrow .background-image.background-image-style-normal img{
    object-fit: fill !important;
    top: 20px!important;
    right: 20px!important;
    left: 20px!important;
    bottom: 20px!important;
    width: calc(100% - 40px)!important;
    height: calc(100% - 40px)!important;
}

change values if u like

the 40px one always has to be left + right (horizontal)

[aarondawkins]

Thank you! This all works with an image.

Doesn't work with a svg tho ... any ideas?

[aarondawkins]

@arminunruh Sorry, is there a way to get to work with a SVG?

[arminunruh]

link? should work with svg too

[aarondawkins]

Sure, how we go: https://aarondawkins.com/svg/

[arminunruh]

hey i dont know why it doesnt work with a svg sorry, maybe its better if you use a jpg

[aarondawkins]

It's ok! Jpeg is fine, SVG would be great tho. Thank you so much for your help! I appreciate the support.