移动环境和浏览器环境,如何等比缩放图片? 财富值70

2016-10-27 16:44发布

如下图.浏览器环境调节好了等比缩放,但是移动端变形了,我之前搞后端的,现在转全站,然而对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*/ 
5条回答

max-width: 100%;
}
问题出在min-height,继承.my-swipe 的290px,移动端的话290太高了,高宽比例失真,拉伸图片。
解决办法是调整容器高度,my-swipe a img{height:100%;} 图片有个特性,设置高宽
其中一个属性的话,会自动等比缩放。设置宽度100%的话也可以,比较常用
贴下效果图

一周热门 更多>