CSS – background-image and styling img

前言

之前写过一些: 

这篇作为整理.

Styling img

default behavior

img element width: auto, height: auto 情况下, 会依据图片的 original size 决定.

<div class="container">
  <img src="./images/tifa2.PNG" />
div>

效果

红色框是 container 的大小. 图片超过了.

max-width 100%

所以通常 Tailwind, Bootstrap 它们的 base.css 都会给图片设定一个 max-width:100%

当 img 其中 1 个 dimension 有值以后, 它就会按图片的比例 resize.

width, height: 100%

有些情况下, 希望图片完全覆盖框. 也就是说比例会被改变.

img {
  width: 100%;
  height: 100%;
}

效果

由于, 图片本来的比例是 16:9, 而被强行塞入一个 1:1 的框里, 它就变形了.

object-fit: contain

object-fix 就是用来调整它变形的. 

object-fit: contain;

contain 的意思就是把图片完整的塞入, 但是不变形, 而是留白. 好处是图片信息还在, 坏处是留白.

object-fit: cover

完整图 --> 

cover 没有造成留白, 但是图片信息却丢失了. 它只截取了中间的部分.

它的步骤是先把图片压缩 (依据比例选择 width, height 其中一边来压缩), 比如上面这个是压缩高度.

图片 vertical 的信息被保留了, 那 horizontal 就需要被牺牲掉. 它默认会保留中间的信息. 所以左右就丢失了.

如果想自行控制它截取的部分. 可以使用 

object-position: horizontal vertical

object-position: 70% 0;

通常是用 % 来控制的. 由于 cover 肯定是压缩其中一边, 所以 horizontal vertical 也只需要调 1 边而已.

它的 percent 算法是这样的

第一张是效果图, 第二张是解释它如果从 70% 开始 cut. 

object-fit: fill

这个就是默认值, 也就是图片会变形.

object-fit: none

跟 cover 有点像, 只是它不会压小, 它就直接 clip 中间.

这时也是可以用 object-position 来调整. 通常这时就是调 2 边 holizontal 和 vertical

object-fit: none;
object-position: 70% 0%;

效果

它的算法是这样的: 

假设图片的 width 是 1349px. 框是 250px

那么 1349 - 250 = 1099px 这个就是 0-100% 的 range.

除于 100 等到 10.99px = 1%

所以用 px 来表达的话是 70 * 10.99px = 769.3px (记得要用 negative value, 不然方向会错)

object-position: -769.3px 0%;

效果是一模一样的.

filters

img {
  filter: grayscale(100%); /* 黑白照 */
  filter: blur(4px); /* 变萌 */
}

还有许多 effects, 但常用的就只有上面 2 个, 更多参考.

Flip Image

镜子效果是通过 scaleX 来做的.

img:hover {
  transform: scaleX(-1);
}

extra 4px at the bottom

参考: 

background-image

default behavior

background-image 默认就类似有了 img width, height: 100% 的概念. 它是不会超出 container 的 (废话不然它怎么是 background).

default 它的效果是 object-fit: none

background-size and background-position

其实就是 image 的 object-fit 和 object-position

background-image: url("./images/tifa2.PNG");
background-size: cover;
background-position: 70% 0;

玩法一模一样就不再解释了.

background-repeat

如果图片比 container 小, 默认情况下它会自动重复. 可以 set 成 no-repeat, x-repeat, y-repeat, repeat 来控制它.

multiple background-image

background image 是可以 multiple 的

用逗号分开 1, 2

越靠前的越在上层, 用户越看见.

shorthand 的写法

background-origin

set background image render 位置

background-origin: content-box

border-box, 从 border 开始

padding-box (default), 从 padding 开始

content-box, 从内容开始

background-clip

和 origin 一样, 也是 border-box, padding-box, content-box, 只是它是用来做 paint 的, 比如 color

background-clip: content-box;
(新)CSS

相关

标签