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

Question

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

我可以应用的CSS规则或属性是否有任何修改.carousel .item,.carousel img以防止在水平拖动浏览器窗口时图像的宽度失真？我在想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.