Bootstrap 响应式 CSS 图像宽度倾斜和扭曲答案

【问题标题】：Bootstrap responsive CSS image width skewed and distortedBootstrap 响应式 CSS 图像宽度倾斜和扭曲
【发布时间】：2016-05-20 15:26:00
【问题描述】：

我正在使用 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;
  } 
}

【问题讨论】：

@user15542624 检查解决方案

标签： css twitter-bootstrap

【解决方案1】：

问题在于您正在定义导致问题的特定高度和/或宽度（取决于您的布局）。如果您的设计允许，请将 @media 中的 "height:900px" 从 .carousel img 更改为 "height:auto"文件，这样您的图像就不会被扭曲。

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

这显然只适用于背景图像。

【解决方案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;
 } 
}

【讨论】：