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

Question

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

Answer 1

.my-swipe a img{
min-height: 100%;

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

Answer 2

看具体要求吧！
移动端宽高比大于图片（图片展示的情况），那么就只能上下留白（width设置为100%，不能左右留白），或者只显示图片居中部分。
最好还是上传两张图片。

Answer 3

你在做swiper，移动端的话，你只需要设置img的width为100%，切图的时候把分屏的图切成分辨率一样的，就不会拉伸了

Answer 4

只设置图片宽度，高度不设置