如下图.浏览器环境调节好了等比缩放,但是移动端变形了,我之前搞后端的,现在转全站,然而对CSS不太熟,请大神给予指点,如何做能保持不变形?左右留白没关系.代码如下
<swipe class="my-swipe"> <swipe-item class="slide1"><a href=""><img src="http://www.tuanquanquan.com/upload/2016/0909/10360934225.png"></a></swipe-item> <swipe-item class="slide2"><a href=""><img src="http://www.tuanquanquan.com/upload/2016/0819/21275353782.jpg"></a></swipe-item> <swipe-item class="slide3"><a href=""><img src="http://www.tuanquanquan.com/upload/2016/1020/17205895644.jpg"></a></swipe-item> </swipe> /*swipe*/ .my-swipe { height: 290px; color: #fff; font-size: 30px; text-align: center; } .my-swipe a img{ min-height: 100%; max-width: 100%; } .slide1 { background-color: #0089dc; color: #fff; } .slide2 { background-color: #ffd705; color: #000; } .slide3 { background-color: #ff2d4b; color: #fff; } /*swipe*/
你在做swiper,移动端的话,你只需要设置img的width为100%,切图的时候把分屏的图切成分辨率一样的,就不会拉伸了
一周热门 更多>