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

<li>
<div class="pic pic_pro">
<img src="//cdn.myxypt.com/096f047c/24/07/c20f9e239c462bdbdbd3bafa691cd1d3fe40922e.jpg0" alt="">
</div>
<div class="pic pic_room"></div>		
</li>

<style>
.product_list li {position: relative}
.product_list li .pic { position: relative; width: 100%; top: 0; padding-bottom: 100%; background: no-repeat center center; background-size: cover; transition: 0.3s}
.product_list li .pic img{width: 100%;background-size: cover;transition: 0.3s;}
.product_list li .pic_pro img {width: 100%;height: 100%;position: absolute;left: 0;top: 0;}
.product_list li .pic_pro img{ content: ''; display: block; position: absolute; width:100%; height:100%; right: 0; background: url(../images/pro_icon.png) no-repeat; background-size: contain}
.product_list li .pic_room{ position: absolute; opacity: 0;}
.product_list li:hover .pic_room{ opacity: 1}
</style>