米
心情
所有
图集
登录
搜索
原创
css控制图片不变形（高度等于宽度）的写法推荐
米醋儿
发布于:2022-03-11
  一般在我们使用图片的时候，可能会存在图片变形的情况，这里简单介绍一种图片不变形的写法，需要的拿去使用吧。 **html结构** ``` <div class="imgWrap"> <a href="2.jpg" class="fl glightbox" > <img src="/static/images/loading.gif" data-original="2.jpg" /> </a> </div> ``` **css结构** ``` .imgWrap{ display: block; width:200px; height: 240px; float: left; margin: 3px; } .glightbox{ width: 100%; height:0; padding-bottom:100%; position: relative; } .glightbox img{ width:100%; height:100%; position: absolute; top:0; left:0; border-radius: 5px; } ``` 按照以上写法将css和html准备好，无论你图片多大，不会变形了，只会截取相对应应该显示的部分。 [](https://micuu.com/data/avatar/20220311/3a913ca1ebe69e94a4b3a75854670d16.png)
注:原创不易,转载请注明出处(
http://micuu.com/new/2663.html
)，本站所有资源来源于网络收集，如有侵权请联系QQ245557979进行清除。
最后修改与 2022-03-11
上一篇：
近期的一点乱七八糟的照片
下一篇：
明天又是周六了，需要带小黑去绝育了
留言反馈
请先登录
问题反馈渠道，如有软件无法下载或者其他问题可反馈。【由于某种原因，目前留言不展示】
用户需要登录后才能留言反馈
立即留言
珍藏视频
10分钟高效燃脂
30天高效瘦脸操
5分钟缓解颈椎操
友人
微博
全民K歌
唱吧
今日头条
悠悠网
科技小锅盖
彼岸桌面
阮一峰
laravel社区
V2ex
掘金
更多>
