鱼C论坛

 找回密码
 立即注册
查看: 1339|回复: 3

[奇技淫巧] 四大不传CSS心法解决#图片变形问题

[复制链接]
发表于 2019-6-20 14:30:30 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
本帖最后由 不二如是 于 2020-3-17 19:08 编辑

估计很多鱼油都会困惑:

明明图片在自己电脑布局的时候,效果很完美,但是一旦放到别人的浏览器上就很难看?

这是为啥呢?

常见的原因,无非就是写死了图片宽高,导致渲染图片比例不对,将布局撑坏。

如何从前端保证图片不变形,也是一项很重要的能力,不难,但是要会哦。

今天介绍 4 种常用的通过 CSS 完美解决图片变形的方法。

准备两张图(555 * 555;555 * 370):
1.jpg
《零基础入门学习Scratch》了解下:传送门

1.png


图片素材包(鱼油可自行准备哦):
游客,如果您要查看本帖隐藏内容请回复



方法一

让图片的宽度或者高度等于容器的宽度或高度,然后让图片居中

我们先创建一段基础网页,加载两张图片:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>鱼C-奇技淫巧</title>
  6. </head>
  7. <body>
  8. <div>
  9.     <img src="images/1.png">
  10. </div>
  11. <br>
  12. <div>
  13.     <img src="images/1.jpg">
  14. </div>
  15. </body>
  16. </html>
复制代码

download.png


按照上面说的让图片或宽高等于容器的宽高,然后图片居中。

通过 css 来实现,先统一限定 div 宽高为 333px,顺便加一个 1px 边框:

  1. div{
  2.             position: relative;
  3.             width: 333px;
  4.             height: 333px;
  5.             border: 1px solid green;
  6.         }
复制代码

download.png


由于图片宽高默认都是 555,正常溢出,接着设置一下 img 的样式:

  1. img{
  2.             width: 100%;
  3.             position: absolute;
  4.         }
复制代码



第一张图效果还好,因为都是正方形的,所以自动适应后效果还不错。

第二张图由于是矩形,宽度 100% 后,长度会自适应,所以很诡异。

我们可以通过 transform()方法平移元素。

  1. top: 50%;
  2.             left: 50%;
复制代码

要先通过 top,left 像下右移动 50%:
Snip20190621_25.png


然后通过再平移:

  1. img{
  2.             width: 100%;
  3.             position: absolute;
  4.             top: 50%;
  5.             left: 50%;
  6.             transform: translate(-50%,-50%);
  7.         }
复制代码

Snip20190621_23.png


如果图片的宽度限制了,高度大于等于容器的高度,就会填满整个容器。

但是如果图片高度小于容器高度,就会出现空白,固定高度同理。

此方法是最简单也最实用,配合后台裁切,更加完美。


方法二

让图片始终显示在容器内,并且居中显示

方法二可以说是方法一的升级操作。

在 img 样式中去掉 width:100%,并添加:

  1.         max-width: 100%;
  2.         max-height: 100%;
复制代码

Snip20190621_27.png


可以看到,无论是宽度超过容器,还是高度超过容器,还是宽高都不超过容器。

都能全部居中显示在容器内,不会裁切。

如果换成一张纵向矩形图效果更明显。


方法三

将图片变成背景,通过改变背景尺寸等可以任意改变图片在容器中显示的效果

这个操作可以说是最简单的,我们只拿 1.jpg 举例子(注释掉 1.png)。

利用 background-image 属性引入图片:

  1. <div class="d2" style="background-image: url(images/1.jpg)"></div>
复制代码

重新修改 div 样式:

  1. div{
  2.             width: 333px;
  3.             height: 333px;
  4.             border: 1px solid green;
  5.             background-repeat: no-repeat;
  6.             background-position: center;
  7.             background-size: cover;
  8.         }
复制代码

Snip20190623_32.png


其他样式不变,分别更改 background-size 属性的值,第一种 auto auto :

  1. background-size: auto auto;
复制代码

Snip20190623_34.png


第二种 100% auto :

  1. background-size: 100% auto;
复制代码

Snip20190623_35.png


第三种 auto 100%:

  1. background-size: auto 100%;
复制代码

Snip20190623_36.png


第四种 100% 100%:

  1. background-size: 100% 100%;
复制代码

Snip20190623_37.png


我们可以看到方法一和方法二都能轻松实现。

最开始的 cover 效果是最理想的,即居中显示,占满整个容器并且不变形。

这种方法如果不考虑 seo 的话,用起来还是很顺手的。

但是,如果是资讯站、图片展等等,千万不要用这种方法,这样图片将很难被搜索引擎收录哈!


方法四

即兼顾方法三,又能兼顾 SEO

这里就要隆重推出 object-fit 和 object-position。

可以这么理解,object-position 相当于 background-position,它的默认值是50% 50%,也就是居中,所以一般不写。

加了 object-fit,默认就居中了。

而 object-fit,相当于 background-size,即图片填充方式(这里不是图片大小)。

还是一张图片演示,修改下 html:

  1. <div class="d2" >
  2.     <img src="images/1.jpg" >
  3. </div>
复制代码

然后修改 div 样式:

  1. div{
  2.             width: 333px;
  3.             height: 333px;
  4.             border: 1px solid green;
  5.         }
复制代码

最简单的宽高和一个边框,修改 img 的样式:

  1.   img{
  2.             width: 100%;
  3.             height: 100%;
  4.             object-fit: cover;
  5.         }
复制代码

Snip20190623_38.png


接下来分别修改 object-fit 属性的值,第一种 fill:

  1. object-fit: fill;
复制代码

Snip20190623_39.png


第二种 contain:

  1. object-fit: contain;
复制代码

Snip20190623_40.png


第三种 scale-down:

  1. object-fit: scale-down;
复制代码

Snip20190623_41.png


第四种 none:

  1. object-fit: none;
复制代码

Snip20190623_42.png


几乎和方法三的实现结果一样。

注意:图片一定要设置宽高,否则设置 object-fit 无效。

将图片设置为何容器一样的宽高就可以了。

容器也不需要设置溢出隐藏,object-fit 会自动隐藏超出图片的宽高部分。

如果不考虑兼容 IE,这种方法两全其美,何乐而不为呢?!





                               
登录/注册后可看大图


如果喜欢,别忘了评分


                               
登录/注册后可看大图


这位鱼油,如果喜欢本系列HTML帖子,请订阅 专辑&#9758;传送门)(不喜欢更要订阅
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2019-6-20 14:39:30 | 显示全部楼层
沙发围观
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-4-25 13:52:41 | 显示全部楼层
前来围观
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-5-9 14:20:00 | 显示全部楼层
看看
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-3-29 06:55

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表