Images don´t scale up to full browser width (beyond native image resolution)

tableconnect · May 2015

I am using a fullwidth demo theme (bevideo)

When I insert a fullwidth image (1/1) into a section, the image stretches to it´s maximum native resolution (1920px) and smaller but does not scale up for wider screen resolutions. It is also always left-aligned althought "Align" is set to center OR none.

What I would like is that the Image always stretches proportionally to the fullwidth of the browser....

(similar to how the revolution slider always adjusts perfectly)

thanks

Albert · May 2015

Hi,

with background images for sections it is not possible because this is css background. It's technically not possible.

Thanks for understanding!

tableconnect · May 2015

I mean an image-element (via Add-Item Button) inserted into a section as fullwidth element 1/1.

It does not scale up to the browser width...

However some of your demos can do that - the Golf Demo for example.
Here is a comparison:

https://www.dropbox.com/s/erw8meiwy1m8up7/image_scaling_fullwidth.jpg?dl=0

Thanks for your help!

Albert · May 2015

On Be|Golf we used background images for section. It's not "Image" item. And as we mentioned, those images won't scale because it's technically not possible.

tableconnect · May 2015

Thank you for the quick reply as always.

I tried to use a background image for the section now but also do not understand how to make it scale full width (like in the golf demo)
My settings for the section:

-----

Background image position: Center top - no repeat

Layout: full width-no sidebar

Style: full width

-----

...are these the correct settings because the image still does not stretch to the browsers width....?

thanks

Albert · May 2015

Yes, those settings are correct. Maybe your background image is not big enough? Where is the url where we can have a look on this background?

tableconnect · August 2015

Sorry, didn´t see your reply.

The problem is still there: http://tableconnect.net/

Under "IN ACTION" there is a section background image with:

-----

Background image position: Center - no repeat

Layout: full width-no sidebar

Style: full width

-----

The image does not scale above it´s native resolution. However on your demos like Golf and Agro the background image stretches beyond its native resolution to always fill 100% browser width...

What am I doing wrong? Thanks

Albert · August 2015

The background image you refer to is section's background image and this image won't be never responsive as it's technically not possible to make css background responsive. Except that, your background looks great what you can see on http://pasteboard.co/2GKJFowQ.png and it's always 100% width.

tableconnect · August 2015

I dont understand why you tell me that it is not possible when in fact in your demo the background scales just fine to the fullwidth...

Please look at my screenshot - the golf demo section background scales to full width. But i cannot replicate that with my site: https://www.dropbox.com/s/j4qw6pb6lelmxiv/image_scaling_fullwidth_02.jpg?dl=0

(it also scales on Agro, Bike Rental,....)

tableconnect · August 2015

Ok I think I figured it out - it must be set to PARALLAX!

Albert · August 2015

Sorry but we probably talk about different things. We thought that you were talking about responsible on smaller devices like ipads or iphones. But as we see on screenshot, you refer now to width on larger screens. So maybe your background is not big enough? We have no information what is the resolution of your screen where you did the screenshot, but looks like it's a really big screenshot. And if image is not big enough, then upload 3000px width or even more because there is no magic here. There is no setting responsible for image width. Image is just image and if is not big enough, then upload wider background.

We compared Be|Golf demo with your site and both looks the same on our side. There is no difference between them. Both are full width but maybe it's due to the different screen resolutions.

EDITED!!! Really? Your background was parallax on our side for all the time so we do not understand why it was different on your site. Maybe it's because of cache? Anyway, we're glad to hear that you sorted it out!

tableconnect · August 2015

I have never set it to parallax before (because it didn´t seem logical to me), so I believe it just looked the same for your because your screen resolution is not larger than 1920px width. (the image is exactly 1920px wide - so fullscreen for a 1920px resolution)

I have a 2-screen setup and scaled the browser across both screens to make the screenshot.

So anyway - PARALLAX seems to be the only option to scale images UP beyond their native resolution.

Not sure if that is a technical limitation but figuring that out was not easy.
Maybe you can make that more clear in the settings with a hint like "Parallax- scales to unlimited browser width"

Thanks

Albert · August 2015

We must test this first because we had no idea that parallax scales to unlimited browser width. And to be honest this is really weird what you say so we must have a look on it closer first. But thanks for pointing this info!

tableconnect · August 2015

Please don't change it

- I like that it scales!

(and I wish other options would scale as well)

nikhiljoshi122 · June 2016

The images at revoloution slider pannel are not displaying appropriately. I have used the recommended sizze of 1900*1200 but it is stretched.

Have used contain, normal source settings but either of the images do not seem to properly fit in the screen.

Here is the link - www.digitaljalebi.com/tangentVR.

Albert · June 2016

@nikhiljoshi122 We don't see anything wrong. Your image looks as supposed to look like.

Images don´t scale up to full browser width (beyond native image resolution)

Comments