1

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?

  • Looking at [example image from site](http://sanbruno.herokuapp.com/img/happy-const-min.png): the easy way would be taking a part from bigger image and just crop a part that you need. Probably you will loose some top and bottom of the image but your image will not be streached out. What's the original size of the image? – kademat Sep 11 '18 at 07:52
  • Original size of images is 4256 x 2832 –  Sep 11 '18 at 07:58

1 Answers1

0

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

kademat
  • 134
  • 1
  • 9