variable Picture Size - Post ID 295429

User 41932 Photo


Registered User
4 posts

Hello,
I'm new to SD5. I made a site for my wife with CoffeeCup in plain HTML.
Now I want to do this with "Bootstrap4"
On top of the index-page I want to place a picture, she used on all of her flyers, in a div as background.
On the DESIGN-TAB I added this image as a local file.
The orig size is 2480x1280.
Is there a possibility to zoom the picture when sliding from one brakepoint to the next
or do I have to make different pictures for different width (mobile, tablet, desktop)?
Can I center this image in the div?
Thx in advance for your help.
Regards
HaJo
PS: sorry for my english ;-)
User 122279 Photo


Senior Advisor
13,771 posts

Hi, check out the attached file. Your image is very close to aspect ratio 2:1, so I have used that in the example. Observe the width and the bottom padding of the div, and then the image's 'cover' size. You may center the image where it says 'Position' right below where you select the image.

The dimensions I have used are just an example, so they can be changed, but I would stay within the 2:1 ratio. You may also set e.g. 90% width/45% bottom padding to begin with, and then change it at a breakpoint when the viewport gets larger.
Attachments:
Ha en riktig god dag!
Inger, Norway
This site was made before we were able to create components through the app:
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/
My work in progress right now:
Components for the same as above + HTML Editor: https://mock-up.coffeecup.com


User 122279 Photo


Senior Advisor
13,771 posts

Hi again, by mistake I made the example from last night with a newer version that has not been launched yet, and as a result, you won't be able to open the file. Here is a new file, made with the correct SD version.
Attachments:
Ha en riktig god dag!
Inger, Norway
This site was made before we were able to create components through the app:
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/
My work in progress right now:
Components for the same as above + HTML Editor: https://mock-up.coffeecup.com


User 41932 Photo


Registered User
4 posts

Hi Inger,
thank you. This will work after I made a change in image-settings.
Repeat: no
Size: Custom and uncheck the horizontal Auto an leave the vertical checked.

Regards
HaJo

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.