滑块宽度和高度无拉伸

Question

我正在为我的一位朋友在网站上工作。只有一个问题。如果没有拉伸，滑块将无法放入框架中。

我已将它设置为100％高度，但它无法解决。 （它也响应） 我希望它是原始宽度和高度（100x100,200x200等）的一个很好的图像，没有拉伸（200x500）。

我希望你们可以帮助我解决这个问题。 我尝试了很多，还问过其他人，但他们无法帮助我。

您可以在此处看到滑块。 http://tinyurl.com/p36hz6u

这是滑块的另一个版本，但在此版本中滑块图像被切断 http://tinyurl.com/nfjjvwu

Answer 1

如果图像是背景图像，请考虑使用background-size:contain;，这样可以使图像在不拉伸的情况下增大到可见/可能的大小，然后您可以使用background-position将背景图像放在任何需要的位置

如果幻灯片具有实际的物理<img />标签，我创建了一个JSfiddle，它演示了包含元素内图像的代码。在此示例中，<div>代码表示浏览器窗口，可以调整大小：http://jsfiddle.net/dds27w2y/

Answer 2

首先，我要删除：background-size: 100% 100%并添加background-position: center center。 然后我会在容器中添加background-color: white。这将使它看起来更好，并且它将居中。