select n.*,ad.username from news n,admin ad where n.addid=ad.id and n.id=298 css3:object-fit的使用方法-新闻详情

css3:object-fit的使用方法


发布时间:2018-06-06责任编辑:朱明 浏览:69


object-fit 只能用于可替换元素 。所谓可替换元素,是指元素的内容和表现不是由CSS控制的,独立渲染的外部元素,比如: img、 object、 video 和 表单元素,如textarea、 input,audio 和 canvas在一些特殊情况下,也可以作为可替换元素。

1.语法

在使用 object-fit 时,一定要设定元素的size,也就是 width 和 height

object-fit 有五个可选值,分别是:

①object-fit: fill; 默认值。填充,可替换元素填满整个内容区域,可能会改变长宽比。

②object-fit: contain; 包含,保持长宽比,保证可替换元素完整显示,长宽比和内容区域的长宽比不一致时,内容区域会出现空白。

③object-fit: cover; 覆盖,保持长宽比,保证内容区域被填满,所以可替换元素可能会被切掉一部分,从而不能完整展示。

④object-fit: none; 是保持可替换元素原尺寸和比例。

⑤object-fit: scale-down; 等比缩小。效果类似 contain 或 none

2.效果如图

css3:object-fit的使用方法1.jpg

3.浏览器兼容性

IE 全不支持,包括最新的 edge

android 4.4.4+ 支持,Chrome 29+ 支持

Safari 7.1+ 和 iOS 8+ 支持 object-fit,不支持object-position



项目设计组  供稿