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

【问题标题】：My images look terrible on a image slider- what should I do to make my images look not stretched out?我的图像在图像滑块上看起来很糟糕 - 我应该怎么做才能使我的图像看起来没有被拉伸？
【发布时间】：2019-02-15 15:59:10
【问题描述】：

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

问题不在于我的滑块代码，我的问题是这是否可能让我的图像在这种高度/宽度比下看起来很棒（我已经尝试使用 Sketch 缩放图像，这是我拥有的最佳结果到目前为止）？我也不想给滑块增加更多的高度，因为我认为滑块不应该占用那么多空间。

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

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

【问题讨论】：

看着example image from site：最简单的方法是从更大的图像中取出一部分，然后裁剪您需要的部分。可能您会丢失图像的顶部和底部，但您的图像不会被拉伸。图片的原始尺寸是多少？
图片的原始尺寸为 4256 x 2832

标签： css responsive-design slider photoshop sketch-3

【解决方案1】：

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

【讨论】：