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

2024-09-23 09:43:43 浏览：636 作者：保利尼奥

http://218.4.132.130:8108/szshy/

<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>

上一篇：flex 布局

下一篇：input 不自动填充字段值