米
心情
所有
图集
登录
搜索
原创
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)
注:原创不易,转载请注明出处(
https://micuu.com/new/2663.html
)，本站所有资源来源于网络收集，如有侵权请联系QQ245557979进行清除。
最后修改与 2022-03-11
上一篇：
近期的一点乱七八糟的照片
下一篇：
明天又是周六了，需要带小黑去绝育了
▶
珍藏视频
▶
10分钟高效燃脂
▶
30天高效瘦脸操
▶
5分钟缓解颈椎操
友人
→
微博
→
全民K歌
→
唱吧
→
今日头条
→
悠悠网
→
科技小锅盖
→
彼岸桌面
→
阮一峰
→
laravel社区
→
V2ex
→
掘金
+
更多
