CSS完美解决前端图片变形问题的方法_css图片自动拉伸 - CSDN文库

background-size

5星 · 超过95%的资源 23 浏览量更新于2023-05-05 评论收藏 313KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

CSS完美解决前端图片变形问题的方法完美解决前端图片变形问题的方法

在头条IT学堂看到CSS完美解决前端图片变形问题的文章，就记录分享下：

一、让图片的宽度或者高度等于容器的宽度或高度，多余的裁掉，然后让图片居中：

<style type="text/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%);

}

</style>

<div>

<img src="1.png">

</div>

<br>

<div>

<img src="1.jpg">

</div>

效果图：

如果图片的宽度限制了，高度大于等于容器的高度，就会填满整个容器，但是如果图片高度小于容器高度，就会出现空白，固

定高度同理。此方法是最简单也最实用，配合后台裁切，更加完美。

二、让图片始终显示在容器内，并且居中显示。这种方法不会裁切图片，可以说是上面的升级版。

<style type="text/css">

div{

width: 200px;

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

评论10

巴蜀明月

2023-06-13

这是一个值得一看的文件，尤其是对于初学者来说。

weixin_38557896

粉丝: 0
资源: 971

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈