Bootstrap响应式CSS图像宽度偏斜和扭曲

Question

我正在使用Bootstrap来创建一个使用轮播组件的网站，该组件占据了网页的大部分内容。我发现当我调整浏览器窗口大小并水平拖动视口时，图像宽度会变得歪斜和扭曲。我为我的轮播设置了以下整体CSS样式以及不同宽度的媒体查询。

我可以对.carousel .item和.carousel img应用的CSS规则或属性进行任何修改，以防止在水平拖动浏览器窗口时图像的宽度失真吗？我在想width:100%;我可能解决这个问题？

以下是水平调整浏览器大小时出现的偏斜图像：

以下是网站：http://www.the-session.co.uk/jen/

这是CSS：

.carousel .item {
  height: 900px;
}
.carousel img {
  min-width: 100%;
  height: 900px;
}

@media (max-width: 979px) {

  .carousel .item {
    height: 500px;
  }
  .carousel img {
    width: auto;
    height: 500px;
  }
}


@media (max-width: 767px) {

  .carousel .item {
    height: 300px;
  }
  .carousel img {
    height: 300px;
  } 
}

Answer 1

问题在于您正在定义导致问题的特定高度和/或宽度（取决于您的布局）。如果您的设计允许，请在@media中将“height：900px”从 .carousel img 更改为“height：auto”文件，以免您的图像失真。

然而，如果期望的结果是实际上要使轮播图像扩展以填充整个视口，则需要另一种解决方案，可能需要将图像更改为背景图像以填充绝对定位的div。

Answer 2

尝试以这种方式缩放图像的问题在于您没有保留图像的初始宽高比。

相反，请尝试background-size: contain。这指示浏览器按比例缩放图像，使图像沿长轴填充容器。

Answer 3

您在媒体查询中设置了错误的高度值。由于主css中的img高度设置为 height:900px;，您需要执行以下操作：

@media (max-width: 979px) {

 .carousel .item {
     height: 750px;
 }
  .carousel img {
    width: auto;
    height: 75 0px;
 }
}

@media (max-width: 767px) {

   .carousel .item {
     height: 600px;
    }
   .carousel img {
     height: 600px;
 } 
}