在头条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;height: 200px;border: 2px solid red;position: relative;
}
img{max-width: 100%;max-height: 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;height: 200px;border: 2px solid red;background-repeat: no-repeat;background-position: center;background-size: cover;
}
</style>
<div style="background-image: url(1.jpg);"></div>

效果图如下：

通过上图更改background-size，我们可以看到方法一和方法二都能轻松实现。而且，最后一种cover效果是最理想的，即居中显示，占满整个容器并且不变形。这种方法如果不考虑seo的话，用起来还是很顺手的。但是，如果您是资讯站、图片展等等，千万不要用这种方法，否则你的图片将很难被搜索引擎收录。

四、如果有什么方法，即能实现第三种方法的效果，又能兼顾SEO就好了。这里就要隆重推出：object-fit和object-position。你可以这么理解，object-position相当于background-position，它的默认值是50% 50%，也就是居中，所以一般不写，加了object-fit，默认就居中了。而object-fit，相当于background-size，即图片填充方式（这里不是图片大小）。

<style type="text/css">
div{width: 200px;height: 200px;border: 2px solid red;
}
img{width: 100%;height: 100%;object-fit: cover;
}
</style>
<div><img src="1.jpg">
</div>

效果图如下：

通过上图，我们几乎看到了和用背景方法设置效果几乎一模一样的结果。可以这么说，这就是背景方法的翻版，并且还可以避免背景图不会被搜索引擎不收录缺点。如果不考虑兼容IE，为什么不用这种方法呢。妈妈再也不用担心编辑乱上传图片了！

注意：图片一定要设置宽高，否则设置object-fit无效。将图片设置为何容器一样的宽高就可以了。容器也不需要设置溢出隐藏，object-fit会自动隐藏超出图片的宽高部分。

转载于:https://www.cnblogs.com/lwming/p/10982711.html

记录利用CSS完美解决前端图片变形问题相关推荐

html图片显示变形,CSS完美解决前端图片变形问题的方法
在头条IT学堂看到CSS完美解决前端图片变形问题的文章,就记录分享下: 一.让图片的宽度或者高度等于容器的宽度或高度,多余的裁掉,然后让图片居中: div{ width: 200px; height: ...
html用css完成动画效果图,利用CSS Sprite实现PNG图片动画
利用CSS Sprite实现PNG图片动画 12月 6, 2012 评论 (6) Sponsor 如题,今天将会和大家讲解如何利用CSS Sprite(CSS雪碧)来实现PNG图片动画,就像GIF一样 ...
1 利用Anaconda完美解决Python 2与python 3的共存问题
前言现在Python3 被越来越多的开发者所接受,同时让人尴尬的是很多遗留的老系统依旧运行在 Python2 的环境中,因此有时你不得不同时在两个版本中进行开发,调试. 如何在系统中同时共存 Pyt ...
如何在python中调用MATLAB代码（利用anaconda完美解决多python环境问题）
不知道有没有小伙伴遇到和我一样的问题,需要在python代码中使用MATLAB代码运行得到的结果,但是如果直接将MATLAB改写成python,工作量又被加大那么这时候就需要利用官方给出的方法,在p ...
如何解决 img 图片变形
1. 盒子设置和图片等比例大小 2. 使用max-width:300px或max-height:100px,即可解决图片比例缩小.但这样存在一个问题,如果按照宽度缩放,但图片过高会超出溢出盒子,这个时 ...
完美解决 - 前端发版后浏览器缓存问题（发版后及时拉取最新版本代码）
一.简介开发完发布新版本后,在有些电脑上总需要强刷才能获取到最新版本的内容,太恶心了. 浏览器缓存(Browser Caching)是为了节约网络的资源加速浏览,浏览器在用户磁盘上对最近请求过的文档 ...
html图片怎么预加载,如何利用CSS和Javascript实现图片预加载
说到图片预加载,想必大家已经很熟悉了,在平时的项目中,我们常用插件实现预加载,比如:懒加载lazyload插件等等.如果你想了解下lazyload,可以看下这两篇文章: 今天主要想介绍不用插件实现图片 ...
臭名昭著的数据清理和准备问题，如何利用AI完美解决？
2020-03-18 17:01:00 全文共3299字,预计学习时长10分钟来源:Pexels 人工智能和深度学习在处理非结构化数据方面表现突出,从自然语言理解和自动知识库构建到图像和视频的分类和 ...
完美解决前端无法上传大文件方法
1 背景用户本地有一份txt或者csv文件,无论是从业务数据库导出.还是其他途径获取,当需要使用蚂蚁的大数据分析工具进行数据加工.挖掘和共创应用的时候,首先要将本地文件上传至ODPS,普通的小文件通 ...
html中菜单触碰变色,利用css filter实现菜单图片变色效果
需求场景在制作菜单时,未增加响应效果,往往会加入鼠标移入移出时字体和图标进行变色的效果,字体的颜色变化比较好控制,通过color便可以设置,但如果图标是使用的图片,往往要一个图标制作两份不同颜色的图 ...

记录利用CSS完美解决前端图片变形问题

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

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

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

三、将图片变成背景，通过改变背景尺寸等可以任意改变图片在容器中显示的效果，操作是最方便的：

记录利用CSS完美解决前端图片变形问题相关推荐

最新文章

热门文章