[英]Images on an owl carousel are zoomed in on mobile, how do I change it so that it displays all of the image on mobile?
This is how it looks on a desktop:这是它在桌面上的外观:
This is how it looks on mobile:这是它在手机上的样子:
I have the standard properties for the carousel (its nothing special, just a slideshow).我有旋转木马的标准属性(没什么特别的,只是幻灯片)。 I just want it to scale and show the whole picture on mobile instead of zooming in on random parts.我只想让它缩放并在移动设备上显示整个图片,而不是放大随机部分。
HTML HTML
<div class="home-banner">
<div class="owl-carousel owl-theme home-slider">
<div class="item pro_nw" style="background-image: url({{asset('public/frontend/images/slide1_v4.jpg')}});">
</div>
<div class="item pro_nw" style="background-image: url({{asset('public/frontend/images/slider-2.jpg')}});">
</div>
<div class="item pro_nw" style="background-image: url({{asset('public/frontend/images/slider-3.jpg')}});">
</div>
</div>
</div>
CSS CSS
.home-slider{position: relative;}
.home-slider,
.home-slider .owl-stage-outer,
.home-slider .owl-stage-outer .owl-stage,
.home-slider .owl-stage-outer .owl-stage .owl-item,
.home-slider .owl-stage-outer .owl-stage .owl-item .item{height: 100%;}
.home-slider .owl-stage-outer .owl-stage .owl-item .item{
position: relative;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack:center;
-ms-flex-pack:center;
justify-content:center;
-o-background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position:center center;
margin-bottom: 20px;
min-height: 730px;
}
It has to be one of the properties in the CSS (i think).它必须是 CSS 中的属性之一(我认为)。 I played around with a few of the properties, but it scales in odd ways instead.我玩了一些属性,但它以奇怪的方式扩展。
for mobile media query make sure to change background-size to contain.对于移动媒体查询,请确保更改背景大小以包含。 keep the original size for the screen wider than a mobile screen.保持屏幕的原始尺寸比移动屏幕宽。
First change the background size to contain.首先将背景大小更改为包含。
background-size: contain;
then detect the actual screen of the device as to adjust the image size corresponding to your liking然后检测设备的实际屏幕以根据自己的喜好调整图像大小
@media screen and (max-width: 768px) {
.home-slider .owl-stage-outer .owl-stage .owl-item .item{
//size you wanted
//for example---
width: 50%;
height: 50%;
}
}
for mobile responsive make use of media query depending on the screen对于移动响应,根据屏幕使用媒体查询
@media only screen and (max-width:600px) /* specify preferred width here*/
{
/*statement*/
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.