我正在使用猫头鹰轮播,我不希望图像在移动尺寸上被挤压或压缩
<!--=========================slider===========================-->
<div id="main-slider" class="owl-carousel owl-theme">
<div class="item text-center">
<img src="img/front_girl1.jpg">
</div>
<div class="item text-center">
<img src="img/front_girl_3.jpg">
</div>
<div class="item text-center">
<img src="img/front_girl_2.jpg">
</div>
</div>
我在媒体屏幕上的 CSS 1200px
#main-slider .item img{
display: block;
width: 100%;
height:700px;
z-index: -1;
}
我的 CSS 为 480px,但当我调整浏览器大小时它不起作用,它只是被压缩了
#main-slider .item img{
display: block;
width: 100%;
height:700px;
background-position: center center fixed;
z-index: -1;
}
有什么建议吗???
最佳答案
猫头鹰轮播的宽度是多少?此外,您还必须删除高度等级或将其设置为自动。你也可以添加这个:
.owl-carousel{
width:100% !important;
}
此外,如果您使用 Bootstrap ,您可以在图像上添加类“img-responsive”以确保它是响应式的,并添加“center-block”以使图像居中对齐
关于html - 如何在媒体屏幕@media 上固定和居中图像(最大宽度 : 480px),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28900722/