-
Posts
-
This video shows how going from “Stretch to Fit” to “Scale to Fit” doesn’t seem to work properly. The latter leaves a thin White line to the left, a thicker White gap below the section and DOES NOT scale the image at all.
Thank you,
RyanHi rlogan2334!
Please use the no border option in the edit options of the color sections
Regards,
Vinay Kashyap1. The “no border styling” makes things worse, adding thicker white space and adding NEW white space to the top of the image.
2. You didn’t address the image failing to scale. Unless I’m misunderstading what Scale To Fit means to Enfold, my ORIGINAL image should appear the Color Section, SCALED to fit without cutting off any of the top, bottom, left or right of the image. As it is now, the image is cropped all around.
Hi!
The thin white line can be removed from the color section border options. If you are using any custom css it might affect the way it works. Let us know if any customisation was done and please share the link where we can inspect the element in question.
2.
Stretch to fit uses the css property background coverScale uses the css background property contain
Regards,
Vinay Kashyap1. I already posted a link and credentials
2. Border styling has no impact on this issue
3. Setting background to Cover fills the White space – HOWEVER-
4. This still does not solve the image getting croppedUnless I’m misunderstanding what this new feature (Scale to Fit) of 3.5 doesn’t work. Shouldn’t you be able to see an original image, stretched to fit the space?
Hi!
1. I already posted a link and credentials
The credentials do not work. Please provide working credentials so we can have a closer look.2. Border styling has no impact on this issue
The credentials do not work. Please provide working credentials so we can have a closer look.3. Setting background to Cover fills the White space – HOWEVER-
The browser handles cover images to fit vertical and horizontal without any pages and scales the image if it is small or big.4. This still does not solve the image getting cropped
The browser scales the image to fit entire width and height in the process the browser scales it down or up depending on the view port size.Where as Fit to scale will fit the entire image but not the view post so you will find some white space if the image is not proportional to the area you like to to be a background.
In both cases there are browser limitations and at some point you have to make a decision which one suit your needs.
Here is a good example to show you what i mean
https://davidwalsh.name/demo/background-size.htmlyou can find more info here http://blog.vjeux.com/2013/image/css-container-and-cover.html
Best regards,
VinayHi!
Yes there’s a misunderstandment, scale to fit will match the height of the image to the height of the section (
background-size: contain), this however will result in whitespaces at the sides because the width is calculated automatically.If you don’t like this implementation one thing you can try is set both width and height to be 100%, add this to Quick CSS:
#top .avia-full-stretch { background-size: 100% 100% !important; }Regards,
Josue
- The topic ‘3.5 – Background Image – Scale to Fit’ is closed to new replies.