不用找UI, CSS也能搞定图片效果

            <div id="user-content-content_views" class="htmledit_views">
                <h2 style="margin-top: 30px; margin-bottom: 15px; padding: 0px; font-weight: bold; color: black; font-size: 22px; text-align: left; margin: 20px 10px 0px 0px;" data-id="heading-0">一. 实现图片的等比缩放</h2> 

在实际开发过程中, 总是会遇到各种需要处理图片的情况,举个简单的例子, 用户上传头像,我们都知道头像宽高是有一定比例的, 但用户的图片千奇百怪,如果简单的按照我们设定的宽高显示,图片变形不可避免,那么该怎么处理?

方法1: object-fit

这个时候我们需要用到css的一个属性, object-fit.

<div class='header-container'>
     <img src="./333.jpg" alt="">
</div>
<img src="./333.jpg" alt="" style='height: 100px;'>
.header-container{
    width: 100px;
    height: 100px;
    border: 1px solid #333;
    border-radius: 50%;
    overflow: hidden;
}
.header-container img{
    width: 100%;
    height: 100%;
}

不难看出, 上面的头像对比下面的原图,高度被拉伸了, 那么此时只需要给img添加一个属性object-fit: cover;

效果如下:

object-fit属性你了解多少呢?下面听我详细介绍下。

object-fit属性详解

根据MDN(object-fill)的介绍, object-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。

也就是说盒子固定宽高, 图片在这个盒子里面会如何适应。

它有四个属性值:

fill | contain | cover | none | scale-down


contain: 被替换的元素会被缩放,以此来适应框的宽高比, 如果里面元素的宽高比和框的宽高比不匹配,那么就会产生黑边。

可以看到上面图片中左右两边的就是所谓的黑边, 因为它的宽高比与框的不一致。

cover: 被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配,该对象将被剪裁以适应内容框。

也就是说, 在宽高比不一致时,cover属性值会进行裁剪,以此来适应容器。

就像这样:

fill:被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配,那么该对象将被拉伸以适应内容框。

 fill属性与cover属性值类似,都会完全填充内容框, 不同的是fill属性值会拉伸元素来适应容器

如下图, 高度被拉伸

scale-down: 内容的尺寸与 none 或 contain 中的一个相同,取决于它们两个之间谁得到的对象尺寸会更小一些。

大概就是取决于none和contain的最小值, 这个属性不怎么用到。

 

方法2: max-width和 max-height

我们可以设置max-width和max-height来限制图片的最大值,一般是设置为外层容器的100%; 这样图片就会等比缩放,且不会变形。

 

二.css处理图片效果

比如背景图片变模糊, 头像变亮,增加投影效果,反转颜色,对比度,饱和度等等

只需要使用到css3的一个属性, filter

原图:

1.图片变模糊

    filter: blur(5px);

2.图片对比度调整

filter: contrast(200%);

3. 将图片转为灰度图像

    filter: grayscale(1);

4.色相旋转,

filter: hue-rotate(45deg);

5.给图像设置一个阴影效果

    filter: drop-shadow(16px 16px 20px yellow) invert(3%);

 

下面具体说说filter的各个属性值

/* URL to SVG filter */
filter: url("filters.svg#filter-id"); 

/* <filter-function> values */
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);

/* Multiple filters */
filter: contrast(175%) brightness(3%);

/* Global values */
filter: inherit;
filter: initial;
filter: unset;

 

  • url():URL函数接受一个XML文件,该文件设置了 一个SVG滤镜,且可以包含一个锚点来指定一个具体的滤镜元素.
  • blur():给图像设置高斯模糊,值越大越模糊, 但不支持百分比
  • brightness(): 给图像应用一种线性乘法,使其变暗/变亮,为0则全黑,为100%以上才会有变亮的效果
  • contrast()调整图像的对比度。值是0%的话,图像会全黑。值是100%,图像不变。值可以超过100%,意味着会运用更低的对比。若没有设置值,默认是1。
  • drop-shadow(): 给图像设置一个阴影效果。阴影是合成在图像下面,可以有模糊度的,可以以特定颜色画出的遮罩图的偏移版本.
  • grayscale(): 将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像,值为0%图像无变化。值在0%到100%之间,则是效果的线性乘子。若未设置,值默认是0。
  • hue-rotate(): 给图像应用色相旋转。“angle”一值设定图像会被调整的色环角度值。值为0deg,则图像无变化。若值未设置,默认值是0deg。该值虽然没有最大值,超过360deg的值相当于又绕一圈。
  • invert(): 反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间,则是效果的线性乘子。 若值未设置,值默认是0。

❤️鼓励一下

感谢你的阅读,如果觉得文章有用,请点赞鼓励一下。
你的点赞就是对我的最大支持,如有疑问,欢迎评论指正。

原文链接:juejin.im

上一篇:使用这些思路与技巧,我读懂了多个优秀的开源项目
下一篇:JS系列之 Promise

相关推荐

  • 😀一个原生js弹幕库,基于 CSS3 Animation

    BulletJs 😀一个原生js弹幕库,基于 CSS3 Animation 项目地址 演示图 2020-08-13更新 采用rollup打包并发布到npm,rollup打包教程...

    12 天前
  • 🔥 从最近流行的一幅 CSS 风景画中学习 2 个知识点

    最近 CodePen 流行的一张用纯 CSS 绘制的风景画令人印象深刻: 天空的眩光,睡眠反射,精细的房屋细节相当惊艳,下面我们大致说一说这张图片中的一些技术细节。图画的源码地址在文末。

    8 个月前
  • 💫 CSS 幻术 | 抗锯齿

    前言 传统网页的呈现是基于像素单位的,所以图片不能和 SVG 一样进行任意尺寸缩放后还保持边缘平整。也就是说,放大像素逻辑的图片,必然导致可视质量下降(信息失真)。

    6 个月前
  • 💖CSS + JS 送学妹满屏幕小爱心

    故事开始 午饭时间,暗恋已久的学妹拉着我的衣袖:“学长学长,你能不能让这些爱心变成五颜六色的吗~”。 我在旁边笑开了花~~~ 诶呀,口水流出来了。

    7 个月前
  • (译)CSS 定位与层叠上下文(Stacking context)

    你是否在使用定位时,会遇到一个定位元素即使设置更高的层级,也无法将另一个定位元素覆盖的情况?通过理解层叠上下文,你就能更好的构建你的应用。理解渲染流程和层叠顺序当浏览器将 HTML 解析成 DOM 结...

    2 个月前
  • (小白篇)vue-cli3.0创建项目+引入element-ui

    vue-cli在2018年8月份发布了3.0版本,经过重构之后,可以说是一个船心版本! 在项目都落地之后,就想升级一下cli版本,尝一尝3.0带来的舒适,也是为后面项目的开展做一个准备。

    2 年前
  • (vuejs学习)2、使用ElementUI(*)

    1.element安装 开发环境是win10,一到node官网下载node的.msi包安装,二到淘宝cpm镜像查看cpm镜像命令:npm install -g cnpm --registry=http...

    1 年前
  • 黑魔法之 CSS Entry

    大家都知道 webpack 的 Entry 都是 js,如果想输出 css 文件只能在 js 文件里导入 css,所以很多人都会想要是 entry 也可以是 css 那多好,这样就可以任意输出 cs...

    2 年前
  • 高度等于动态宽度(CSS流体布局)[复制品]

    web-tikiThomas Norman提出了一个问题:Height equal to dynamic width (CSS fluid layout) [duplicate],或许与您遇到的问题类...

    3 年前
  • 高品质 React UI 组件

    A high quality UI Toolkit, A Component Library for React 16+. 💘 Installation npm install isui --s...

    3 年前

官方社区

扫码加入 JavaScript 社区