四大不传CSS心法解决#图片变形问题
本帖最后由 不二如是 于 2020-3-17 19:08 编辑估计很多鱼油都会困惑：
明明图片在自己电脑布局的时候，效果很完美，但是一旦放到别人的浏览器上就很难看？{:10_266:}
这是为啥呢？
常见的原因，无非就是写死了图片宽高，导致渲染图片比例不对，将布局撑坏。
如何从前端保证图片不变形，也是一项很重要的能力，不难，但是要会哦。
今天介绍 4 种常用的通过 CSS 完美解决图片变形的方法。
准备两张图（555 * 555；555 * 370）：
《零基础入门学习Scratch》了解下：传送门
图片素材包（鱼油可自行准备哦）：**** Hidden Message *****
方法一
让图片的宽度或者高度等于容器的宽度或高度，然后让图片居中
我们先创建一段基础网页，加载两张图片：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鱼C-奇技淫巧</title>
</head>
<body>
<div>
<img src="images/1.png">
</div>
<br>
<div>
<img src="images/1.jpg">
</div>
</body>
</html>
按照上面说的让图片或宽高等于容器的宽高，然后图片居中。
通过 css 来实现，先统一限定 div 宽高为 333px，顺便加一个 1px 边框：
div{
position: relative;
width: 333px;
height: 333px;
border: 1px solid green;
}
由于图片宽高默认都是 555，正常溢出，接着设置一下 img 的样式：
img{
width: 100%;
position: absolute;
}
第一张图效果还好，因为都是正方形的，所以自动适应后效果还不错。
第二张图由于是矩形，宽度 100% 后，长度会自适应，所以很诡异。
我们可以通过 transform（）方法平移元素。
top: 50%;
left: 50%;
要先通过 top，left 像下右移动 50%：
然后通过再平移：
img{
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
如果图片的宽度限制了，高度大于等于容器的高度，就会填满整个容器。
但是如果图片高度小于容器高度，就会出现空白，固定高度同理。
此方法是最简单也最实用，配合后台裁切，更加完美。
方法二
让图片始终显示在容器内，并且居中显示
方法二可以说是方法一的升级操作。
在 img 样式中去掉 width：100%，并添加：
max-width: 100%;
max-height: 100%;
可以看到，无论是宽度超过容器，还是高度超过容器，还是宽高都不超过容器。
都能全部居中显示在容器内，不会裁切。
如果换成一张纵向矩形图效果更明显。
方法三
将图片变成背景，通过改变背景尺寸等可以任意改变图片在容器中显示的效果
这个操作可以说是最简单的，我们只拿 1.jpg 举例子（注释掉 1.png）。
利用 background-image 属性引入图片：
<div class="d2" style="background-image: url(images/1.jpg)"></div>
重新修改 div 样式：
div{
width: 333px;
height: 333px;
border: 1px solid green;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
其他样式不变，分别更改 background-size 属性的值，第一种 auto auto ：
background-size: auto auto;
第二种 100% auto ：
background-size: 100% auto;
第三种 auto 100%：
background-size: auto 100%;
第四种 100% 100%：
background-size: 100% 100%;
我们可以看到方法一和方法二都能轻松实现。
最开始的 cover 效果是最理想的，即居中显示，占满整个容器并且不变形。
这种方法如果不考虑 seo 的话，用起来还是很顺手的。
但是，如果是资讯站、图片展等等，千万不要用这种方法，这样图片将很难被搜索引擎收录哈！
方法四
即兼顾方法三，又能兼顾 SEO
这里就要隆重推出 object-fit 和 object-position。
可以这么理解，object-position 相当于 background-position，它的默认值是50% 50%，也就是居中，所以一般不写。
加了 object-fit，默认就居中了。
而 object-fit，相当于 background-size，即图片填充方式（这里不是图片大小）。
还是一张图片演示，修改下 html：
<div class="d2" >
<img src="images/1.jpg" >
</div>
然后修改 div 样式：
div{
width: 333px;
height: 333px;
border: 1px solid green;
}
最简单的宽高和一个边框，修改 img 的样式：
img{
width: 100%;
height: 100%;
object-fit: cover;
}
接下来分别修改 object-fit 属性的值，第一种 fill：
object-fit: fill;
第二种 contain：
object-fit: contain;
第三种 scale-down：
object-fit: scale-down;
第四种 none：
object-fit: none;
几乎和方法三的实现结果一样。
注意：图片一定要设置宽高，否则设置 object-fit 无效。
将图片设置为何容器一样的宽高就可以了。
容器也不需要设置溢出隐藏，object-fit 会自动隐藏超出图片的宽高部分。
如果不考虑兼容 IE，这种方法两全其美，何乐而不为呢？！
http://xxx.fishc.com/forum/201803/20/101934b3igkgm9hgbgz0ck.gif
如果喜欢，别忘了评分{:10_281:} ：
http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油，如果喜欢本系列HTML帖子，请订阅 专辑☞（传送门）（不喜欢更要订阅{:10_278:} ） 沙发围观{:10_279:} 前来围观 看看{:10_254:}
页:
[1]