我正在建立一个基于使用Twitter Bootstrap构建的主题的网站:http://demo.graphikaria.com/agilis/theme。
每当我减小浏览器的宽度时,主页轮播的背景图像就会变形。
对于模板使用的默认褪色背景图像,这不是什么大问题,但如果您想使用清晰的图像或徽标,则会出现扭曲或挤压。
答案 0 :(得分:10)
如果您使用IMG标记,它的结尾总是不会超过其容器DIV。因为bootstrap重新调整固定图像的大小以便进行流体布局,特别是在移动设备上,所以图像会被压缩到屏幕宽度。
对我来说似乎运行良好的替代方法是使用< div>带有背景图片的标签。
班级:
.carousel-inner > .item > .carousel-image {
width: 100%;
height: 500px;
text-align: center;
align: center;
}
物品代码:
#csl-item1 {
background:url(img/carousel_image1.jpg);
background-repeat: no-repeat;
background-position: center top;
}
项目:
<div class="item active">
<div id="csl-item1" class="carousel-image"> </div>
<div class="container">
<div class="carousel-caption">
<!-- Caption -->
</div>
</div>
</div>
我很想知道是否有人对这种方法有任何缺陷,所以如果你认为这是一个坏主意,请告诉我......
答案 1 :(得分:2)
你有:
.carousel .item>img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
}
将高度更改为100%
。
答案 2 :(得分:2)
我发现最干净的解决方案是在幻灯片中将此css添加到您的图片中:
object-fit: cover;
overflow: hidden;
您甚至可以将其内联添加到img标记:
<img style="object-fit: cover; overflow: hidden;" class="first-slide" src="/images/beach.jpg" alt="sunny day at the beach">
这里有一篇很棒的文章,展示了CSS3属性的示例及其对图像宽高比的影响:http://www.creativebloq.com/css3/control-image-aspect-ratios-css3-2122968
答案 3 :(得分:1)
在Chrome中查看,默认max-width: 100%
似乎不就是您想要的。
在CSS中,您可以添加已定义的规则以使浏览器使用默认值。
.carousel .item > img { max-width: none }
值得注意的是,您指定min-width: 100%
与绝对height
相结合,因此在大屏幕(如我的,1080p)上,如果图像太宽,它仍会扭曲图像,因此改变宽高比并再次扭曲图像。
答案 4 :(得分:0)
好的,我能做的最好的就是这个......
/* Carousel base class */
.carousel {
height: auto;
margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 35;
}
/* Declare heights because of positioning of img element */
.carousel .item {
background:#e64c6c;
border:.5px solid #e7c1af;
overflow:hidden;
padding:3px;
min-height: 500px;
}
.carousel-inner > .item > img {
float:right;
padding: 2px;
padding-left: 3px;
min-width: 500px;
}
.carousel-inner > .item > img:hover {
border: 1px solid #e7c1af;
}
答案 5 :(得分:0)
使用bootstrap 3.3.7,我可以通过在carousel.css
中删除'height'行来解决这个问题:
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
/*height: 500px;*/
}
答案 6 :(得分:0)
在我的情况下,当屏幕尺寸增加时,图像会失真。我正在使用Bootstrap 4处理一个启动Bootstrap免费模板(https://startbootstrap.com/)。
基于Ira Herman的上述答案(如果我有足够的学分,我会评论),我最终得到了以下代码来解决我的问题:
.carousel-item {
height: 32rem;
background-color: #777;
}
.carousel-item > img {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
height: 32rem;
object-fit: cover;
overflow: hidden;
object-position: 20% 19%;
}
&#13;
可以根据您希望图像增加,减少的方式来调整对象位置x和y坐标。从右侧调整图像也有助于我的情况。我希望有所帮助。