服务器之家
您的位置： 首页 编程语言 css

CSS对比 background-image 与 object-fit

100人浏览   2024-11-12 09:33:54

在小程序开发中，image组件有一个mode属性可以让我们灵活的操作图片的显示，那么在H5开发中，我们又该如何呢？

在 H5 开发中，对于图片的显示可以通过 img 标签的方式或者设置 dom 元素的背景图片来实现；

background-image 属性为元素设置背景图像。

元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。

默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。

tip： 请设置一种可用的背景颜色，这样的话，假如背景图像不可用，页面也可获得良好的视觉效果。

eg:

推荐图片未显示背景色：#f2f2f2

设置为背景图片之后，接下来我们就可以通过 css 属性来操作图片的显示状态了：

background-repeat：

background-repeat 属性设置是否及如何重复背景图像。

默认地，背景图像在水平和垂直方向上重复。

关于 repeat 平铺在日常用户：

1是一整张大图，尺寸和区域大小刚好吻合

2是一个很小的条状图，通过repeat后，形成一个很规则的大图背景。

background-position：

background-position 属性设置背景图像的起始位置。

这个属性设置背景原图像（由 background-image 定义）的位置，背景图像如果要重复，将从这一点开始。

  • 默认值：0% 0%
  • 继承性：no
  • 版本：CSS1
  • JavaScript 语法：object.style.backgroundPosition="center"

eg:

background-clip:

background-clip 属性规定背景的绘制区域。

默认的，元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。

但是有了background-clip之后，我们可以修改了。

语法

background-clip: border-box | padding-box | content-box;

值：

  • border-box背景被裁剪到边框盒。
  • padding-box 背景被裁剪到内边距框。
  • content-box 背景被裁剪到内容框。

background-origin：

background-origin 属性规定 background-position 属性相对于什么位置来定位。

background-origin: padding-box | border-box | content-box;

值

  • padding-box背景图像相对于内边距框来定位。
  • border-box背景图像相对于边框盒来定位。
  • content-box背景图像相对于内容框来定位。

ps: 配合 background-clip以及background-position来使用可以应对大多数需求。

background-size:

background-size 属性规定背景图像的尺寸。

定义和用法

默认值：auto

继承性：no

版本：CSS3JavaScript

语法：object.style.backgroundSize="60px 80px"

语法

background-size: length | percentage | cover | contain;

值

  • length 设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
  • percentage以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
  • cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
  • contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

eg:

object-fit

object-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。

您可以通过使用 object-position 属性来切换被替换元素的内容对象在元素框内的对齐方式。

PS: 这个 CSS 属性同小程序 image 组件中的 mode 属性及其类似，如果我们不知道图片的具体大小，那么这个属性对我们是非常有帮助的：

默认值：object-fit: fill;

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

eg:

正式语法：

object-fit: fill | contain | cover | none | scale-down

contain(重点)：

被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。

这个对我们是很有帮助的，如果我们通过接口获取到的图片数据，我们不知道它图片宽高或者把它约束在某在宽高区间里，用这个是很方便的。比如给轮播图的图片设置上这个属性就是很不错的选择。

eg：

cover(重点)：

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

PS:

这个用于小图展示的话真的超级棒，比如我们要实现一个微信朋友圈九宫格图片上传时，我们一点在把图片约束在一个比例的同时也保证了图片不失真显示，那么用这个准没错，至于想看到具体图片，可以写个点击事件，点击图片预览即可！

fill(默认值)：

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

PS:

这个基本上没人用，其实觉得默认的如果是 cover好一点。

none:

被替换的内容将保持其原有的尺寸。

scale-down：

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

PS: 有点难以理解，不过这个值基本上不用，不用管也没关系。

相关推荐