Search code examples
cssresponsive-designsliderphotoshopsketch-3

My images look terrible on a image slider- what should I do to make my images look not stretched out?


It is the first time I have ever used image slider on a website, what should I do to make my images not look stretched out?

The problem is not with my slider code, my question is if this is even possible to my images look great with this kind of height/width ratio (I have tried scaling images with Sketch already and this is the best result I have gotten so far)? I also don't want to add more height to the slider since I think slider shouldn't take up that much space.

Here is the website for reference: http://sanbruno.herokuapp.com/

People who have worked a lot with sliders- what should I do to make it look great?


Solution

  • So let's make some calculations - as I can see at webpage you're using 2000x600px size images, what's gives us 20/6 scale = 3.(3). So for 4256px width (if you want to use it all) you should have 1276px height (4256 / 3.(3) = 1276px). So if you crop 1276px width from you original image it won't be stretched out.

    Just for demonstration