CSS有效解决前端图片变形问题的方案
5星
- 浏览量: 0
- 大小:None
- 文件类型：None
简介：
本文介绍了一种有效的解决方案，用于在前端开发中避免图片变形的问题，主要讨论了如何利用CSS技术来实现这一目标。
在头条IT学堂看到一篇关于使用CSS解决前端图片变形问题的文章，觉得很有用，所以想分享一下：
一、让图片的宽度或高度等于容器的宽度或高度，并裁掉多余部分，然后使图片居中：
```css
div {
width: 200px;
height: 200px;
overflow: hidden;
border: 2px solid red;
position: relative;
}
img {
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
```
注意，`transform: tra` 后面应该补充完整为 `translate(-50%, -50%)`。
全部评论 (0)
还没有任何评论哟~
