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