You need to sign in to do that
Don't have an account?
Sarisfdc
Resize background image, do not crop
Hi,
I am showing a image on VF page and then putting some text on the image.
I want if user upload small image then image get stretched into the defined width and height, without croping.
if large image is uploaded then it shrink and set as the defined width and height.
My images are getting cropped.
Below is my css.
I am showing a image on VF page and then putting some text on the image.
I want if user upload small image then image get stretched into the defined width and height, without croping.
if large image is uploaded then it shrink and set as the defined width and height.
My images are getting cropped.
Below is my css.
<div class=" darken " style=" background-image: URL(image url); background-repeat: no-repeat !important; background-position: top Center!important; background-size: 640px 240px, auto !important; position:absolute !important position: absolute; width: 100%; overflow: hidden; "> TEXT ON IMAGE </div>
If you are looking to stretch the image to defined size dynamically, what you need to do is set background-size: 100% 100%, this will deform also your image if the defined size does not respect the image size. Let say that your image size is 320px x 170px and your div size is 400px x 400px, your image will resize to 400px being deformed. here is the code: In the other hand, if you need to scale the image to be as large as possible so that the background area is completely covered, here is the code (This will crop the image): But if that's not what your are looking for and you need to scale the image to the largest size such that both its width and its height can fit inside the content area covering the background with its large side (width or height), you may use this code: Hope this helps you
Regards!!