图片变形 自适应图片 响应式

<li classs="aa">
    <div class="pic pic_pro">
        <img src="//cdn.myxypt.com/096f047c/24/07/c20f9e239c462bdbdbd3bafa691cd1d3fe40922e.jpg">
    </div>	
</li>

<style>
   li.aa{position: relative}
   li.aa .pic { position: relative; width: 100%; top: 0; padding-bottom: 100%; background: no-repeat center center; background-size: cover; transition: 0.3s}
   li.aa .pic img{width: 100%;background-size: cover;transition: 0.3s;}
   li.aa .pic_pro img {width: 100%;height: 100%;position: absolute;left: 0;top: 0;}
</style>