引导响应CSS图像宽度歪曲和扭曲

问题描述：

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

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

这里是水平调整浏览器时歪斜发生的历史的图像： enter image description here

这里是网站：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检查解决方案 – Shail 2013-02-24 02:32:31

答

与努力的问题通过这种方式缩放图像就是不保留图像的初始长宽比。

取而代之，尝试background-size: contain。这指示浏览器按比例缩放图像，以使图像沿着较长轴填充容器。

这显然只适用于背景图像。 – 2013-07-06 07:31:09

答

您正在设置媒体查询中高度的错误值。由于在主要的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; 
} 
}

答

的问题在于，你要定义一个特定的高度和/或宽度（取决于你的布局）的事实，这是造成这个问题。如果您的设计允许，请在两个@media文件中将“height：900px”从.carousel img更改为“height：auto”，以使图像不失真。

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

引导响应CSS图像宽度歪曲和扭曲

相关推荐