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