css object

admin管理员组

文章数量:1794759

css object

在弹性布局泛滥成灾的今天, "未知比例图片, 适应未知比例盒子"的需求已经屡见不鲜

---

常用的方法

常用的方法是用 css 的背景图

div { width: 500px; height: 600px; background-image: url(cat.jpg); background-size: cover; background-position: 50% 50%; }

background-size: cover; 让图片大小自适应 background-position: 50% 50%; 让图片居中

---

img + object-fit

css3 有两个新属性 object-fit, object-position 用法跟 background 的差不多

差别在于

• object-fit, object-position 是作用于 img 标签本身(严格来说是针对所有 可替换元素, 本文已 img 举例)
• background 会重复(background-repeat: repeat); object-fit, object-position 不能重复(相当于 background-repeat: no-repeat)

object-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。 您可以通过使用 object-position 属性来切换被替换元素的内容对象在元素框内的对齐方式。

img { width: 500px; height: 600px; object-fit: cover; object-position: 50% 50%; }

---

object-fit 简介 值描述

fill	默认，不保证保持原有的比例，内容拉伸填充整个内容容器
contain	保持原有尺寸比例。内容被缩放
cover	保持原有尺寸比例。但部分内容可能被剪切
none	保留原有元素内容的长度和宽度，也就是说内容不会被重置
scale-down	保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些

contain, cover 跟 background-size 的效果, 用法大同小异 none 保持原本的长宽 scale-down 要视乎盒子的大小, 小的时候 contain, 大的时候 none

---

可替换元素

在 CSS 中，可替换元素（replaced element）的展现效果不是由 CSS 来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的。 简单来说，它们的内容不受当前文档的样式的影响。CSS 可以影响可替换元素的位置，但不会影响到可替换元素自身的内容。某些可替换元素，例如 元素，可能具有自己的样式表，但它们不会继承父文档的样式。

iframe, video, embed, img 等, 都是可替换元素

参考资料: object-fit - CSS（层叠样式表） | MDN

CSS object-fit 属性 | 菜鸟教程

可替换元素 - CSS（层叠样式表） | MDN

end

本文标签： cssobject