css

当前位置:首页 > 前端 > css

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

<li> <div class="pic pic_pro"> <img src="//cdn.myxypt.com/096f047c/24/07/c20f9e239c462bdbdbd3bafa691cd1d3fe40922e.jpg0" alt="">...
<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>


上一篇:flex 布局

下一篇:已经是最后一篇

相关内容

文章评论

表情

共 0 条评论,查看全部
  • 这篇文章还没有收到评论,赶紧来抢沙发吧~