如何解决bxSlider自适应设计-调整图像大小
使用bxSlider,是否可以根据设备显示图像的不同部分?
并在移动设备上显示:
从设计角度来看,此图像大小调整是有意义的,因为如果要在移动设备上使用台式机版本,并保持宽度和高度比例并将宽度保持为100%(如默认设置那样),则图像高度变得太小。提前谢谢。
<ul class="slider" style="padding:0px !important;">
<li><img src="img/image1.png">
<div class="caption1"><p>image1</p></div>
</li>
<li> <img src="img/image2.png">
<div class="caption2"><p> image2 </p> </div>
<div class="caption3">caption </div>
</li>
<li><img src="img/image3.png">
<div class="caption1"><p>image3</p></div>
</li>
</ul>
解决方法
答案是可以的。 您可以将具有不同属性的css用于不同的屏幕。 在此链接中了解有关此内容的更多信息:https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
然后,您可以使用对象拟合来适合较短容器的图像: https://www.w3schools.com/css/css3_object-fit.asp
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。