Slider Cuts off Image when Browser is Resized

Design help General
1

Hi, the Slider Cuts off Image when Browser is Resized. How do I fix this? See image below.
960Ă—662 93.4 KB

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

2

Can you please share your read only link?

3

Your public share link does not work (try it yourself).

4

Hi, sorry can’t show website as i’m under NDA. So does this mean no help?

5

Well it looks like you are using the element and applying the background image to it, rather, put an image element inside therefore it [picture] will change size height, but the image will never get cut off.

1 Like
6

Thanks Vladimir. What I am doing is the following:

  1. dragging a Section onto the page
  2. then dragging the “Slider” element inside it.
  3. I then select the “Slider1” and drag an image onto it. I then select “Slider2” and drag a different image onto it. This is the correct way isn’t it?

I am not adding a background image to it.

7

Yes, you might be experiencing this issue because the slider by default is set to a set height value, therefore cutting off the image that was inserted.

8

That’s what I thought. So can you please tell me how to fix that? DO I need to create a “Class”. Please explain!

9

Well, this is where understanding of responsive design comes into play, set a fixed VW value for the width of the image, then play with the height of the image in VW measurement as well until it looks like you would like it, then set the slider height to the same VW value the image is set to, this way the image will always stay the same exact height and will expand/decrees depending on the browser and will not get cut off with the slider element.

Hope this helps.

1 Like
10

Ok, so my image size is: 2000 x 667 px. So I create a “Class” named “Slider Custom” and set it’s size to 2000 x 667. Bit what part of the Slider do I add the “Class” to? The: Slider or Slider Mask etc.

11

You should not use fixed px values for width, this will be terrible for a responsive site (and it won’t be responsive) that is why I suggested using VW.

You should change the Slider, the parent element.

1 Like
12

Ok, thanks. Dumb Question. What does VW mean?

13

Hi @lm1280,

VW = Viewport Width
VH = Viewport Height

If you want to calculate the ratio:
667 / 2000 = .3335 so your height would be expressed as a percentage of the dynamic viewport width, so your height would be set to = 33.35 VW

If you are using a container that constrains width (max width) then you should use a different method to maintain the aspect ratio. So if you are using a container let is know.

1 Like
14

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