如何阻止此图像不成比例地伸展？

Question

访问http://www.appsbayou.se

在Windows 7中（仅在Chrome和IE11中测试过），带有桌子和mac的大型超大屏背景图像会不成比例地拉伸。然而，在Mac和我的iPhone中，图像永远不会被拉伸。

我还没有创建这个网站，我现在要修复它上面的错误，比如这个。

到目前为止，我已经使用函数CenterSlides（）打开了tc-scripts.js和messer，但它似乎没有任何帮助。这种效果来自何处？为什么它只会在Windows浏览器中出现？是JS还是CSS相关？

如何阻止此图像被拉伸？

Answer 1

如果它是一个标签，那么你通常可以使用它：

.someOptionalSelector img {
  max-width: 100%;
  height: auto;
}

如果您希望将其应用于网页/网站上的所有图片，则可以不使用选择器。

如果是背景图片，您需要确保没有将尺寸设置为100％。

Answer 2

您的图像同时设置了宽度和高度，但是它不符合图像宽高比。 我建议你做的是将图像的父div背景图像设置为你想要显示的图像，然后设置以下CSS属性：

.carousel-image{
  background-size: cover;
  background-position: center;
}

将会发生什么情况，您的图像将被居中并裁剪，因此它始终至少与包含div的尺寸相同。

Answer 3

您可以使用width = 100％和high = 100％，或者您需要的百分比（例如，一半是50％），而不是固定值。