首页
论坛
社团
我的

ADSKN论坛

 找回密码
立即注册

扫一扫,微信登陆

开启左侧

[前端] CSS object-fit 属性详解+展示

[复制链接]
 楼主| Chao_Bei 发表于2021-10-13 23:50:58 | 显示全部楼层 |阅读模式 | 来自 辽宁省大连市 移动

马上注册加入论坛,获取更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x

前言


CSS 的 object-fit 属性,解决了网站响应式页面的图片展示问题。

一开始我是从Edge浏览器的“新建标签页”页面看到的Bing的“每日一图”的大小能够随浏览器视口大小自动调整,检查元素后,搜索<img标签(目前background-image属性还做不到那么高级的背景图调整),发现class="picture"的图片下,有object-fit属性,禁用后“每日一图”变形。

因此,img标签随窗口自适应是由object-fit属性控制的。

接下来简要介绍CSS中,object-fit属性的用法。


CSS

object-fit

注:以下内容部分来自MDN


一、MDN中的解释

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

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

二、取值

1.fill

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

2.contain

被替换的内容将被缩放,以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比,因此如果宽高比与框的宽高比不匹配,该对象将被添加“黑边”。

3.cover

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

4.scale-down

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

5.none

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

三、展示

图片中,从左到右分别是fill、contain、cover、scale-down、none的示例

站长の说明


支持这个CSS属性的浏览器:

桌面端:

Chrome 32

Edge 79

Firefox 36

IE no(垃圾IE)

Opera 19

Safari 10


移动端:

WebView Android  4.4.3

Chrome Android 32

Firefox for Android 36

Opera Android 19

Safari on iOS 10

Samsung Internet 2.0


展示源码我会放下面

 楼主| Chao_Bei 发表于2021-10-13 23:59:17 | 显示全部楼层 | 来自 辽宁省大连市 移动
回复

使用道具 举报

公告
  • 问题反馈请扫码加入一期核心用户群
  • [学生认证] 认证后获取生活类板块发帖权限
高级模式
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则 需要先绑定手机号

QQ|Archiver|手机版|小黑屋|ADSKN短链接收益平台 ( 冀ICP备2021002162号 )

GMT+8, 2022-10-5 16:05 , Processed in 0.319899 second(s), 16 queries , Gzip On, Redis On.

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表