Full-Width Limitations Solution?

I could use some education:

On this site, if you look at the slider, you will see that it is full width. The downside to this is that if you were to look at it on larger monitor (larger than 1920px width), you will see the height shrinking. Is there a way to keep some height so the height of the slider won’t dissolve in to a thin layer of nothingness?

Thank you.

Hi,

I’m not quite sure what you mean as the height doesn’t change at all on wider monitors. The image becomes wider and to maintain the aspect ratio the height of the image increases accordingly but of course you don’t see the whole image because the height of the container is constant. This results in you only seeing the top part of your image because it has now scaled so large that it won’t fit into the fixed height header.

There’s not much you can do about that apart from finding a responsive slider that changes height as the image decreases/increases in size but you will end up with a very big image. Or maybe you could centre the image and see the best part of it. Or perhaps set a max-width on the slider and just have a fade effect at the edges on larger monitors (or a solid background colour).

If you want he image to scale properly then its ratio to height and width must remain the same otherwise you would end up with a stretched or squashed image.

Nice of you to advertise my market by the way :slight_smile:

Thank you, Paul O’B. I figured there would have to be a line drawn somewhere if the aspect ratio needed to have some consistency. Otherwise, we’re dealing with images that are blown up too much on bigger monitors or thin and squinty on smaller devices, which loses the appeal the designer wants.