Streaming live at 10am (PST)

Keep Carousal image centered on resize


#1

Hi, I need some help on my home page.

http://angel-publicity.webflow.io/

On re-size i would like the carousal image to keep centrered to the browser window like on this site

http://junctionmoama.com.au/

At the moment it doesn't move to follow this. I also need to retain filling the full screen.

You can see the site in preview mode here..

https://preview.webflow.com/preview/angel-publicity?preview=78e272969f104cf15a559fcb34695222

Secondly I would like the logo and 2 buttons to resize smoothly. At the moment they move position and dart around on resize.

Any help would be great.

Cheers Paul


Here is my public share link: LINK
(how to access public share link)


#2

Hi @Paul_Lyngby_Trow

First of all, I would not recommend to use same class for different type of elements. For now you have Section, Slider and Images inside the slides with exactly same class.

Change style of Image inside the slide: instead of having height = 100% , make width=100% and height=auto

For make elements smoothly resizing dependent on browser/screen width make their width in %. It is working very good on images.

Regards,
Anna


#3

Hi Anna,

Thanks for the tip.

I have added this to the first slide. I'm getting the centering which is great but losing the image displaying full screen like on the next slides.

cheers Paul


#4

Well, it always will depend on users screen resolution. For example on my screen it is full width, but height is bigger than screen height.


#5

Hi this is still not exactly working for me. I have attached some screens shots to show you what i mean,

The first one shows the first slide with your recommended display, you can see the space underneath is grey which shows on resize. What i need is the carousal to fill the full screen like this screen on resize but the image needs to stay in the centre rather than not moving on resize. you can see the men in the boat is at the side and should be in the center.

Any help would be great.


#6

Hello @Paul_Lyngby_Trow

You have to remember that image will always keep its aspect ratio (the proportional relationship between the image's width and height). So...

With settings that I suggest images width will always be equal browser width. It means that when you make browser window smaller - image will rescale depend on browser(screen) width. It calls Responsive Image

With settings that you have images height will always be equal browser height. It means that you make browser window smaller - image will keep browser height but if image width will be bigger than browser it will look cropped.

Hope you understand my point. You will have to choose what settings you will use, anyway. Because if you will make image 100% width and 100% height is will lose its ratio.

Regards,
Anna


#7

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.