css - 我的图像在图像滑块上看起来很糟糕 - 我应该怎么做才能使我的图像看起来没有被拉伸？

Question

这是我第一次在网站上使用图像滑块，我应该怎么做才能让我的图像看起来不被拉长？

问题不在于我的滑块代码，我的问题是，如果我的图像在这种高度/宽度比下看起来很棒（我已经尝试使用 Sketch 缩放图像，这是迄今为止我得到的最好结果） )? 我也不想为滑块增加更多高度，因为我认为滑块不应该占用那么多空间。

这是供参考的网站： http: //sanbruno.herokuapp.com/

经常使用滑块的人——我应该怎么做才能让它看起来很棒？

Answer 1

因此，让我们进行一些计算 - 正如我在网页上看到的那样，您正在使用2000x600px尺寸图像，是什么给了我们20/6scale = 3.(3)。所以对于4256px宽度（如果你想全部使用它）你应该有1276px高度（4256 / 3.(3) = 1276px）。因此，如果您1276px从原始图像中裁剪宽度，它将不会被拉伸。