【CSS】object-fit 和 object-position 属性详解

目录

  • object-fit属性
    • 属性值:
    • 使用场景:
  • object-position 属性
    • 语法:
    • 例如:
    • 使用场景:

object-fit和object-position是CSS属性,用于控制图像或视频在其容器中的适应和定位方式。

object-fit属性

属性值:

  1. fill:默认值。替换元素的内容将被拉伸以填充元素的内容框。这可能会导致内容的长宽比发生变化。
  2. contain:替换元素的内容将被缩放以适应元素的内容框,同时保持其长宽比。这可能会导致内容框的某些部分没有被替换元素的内容覆盖。
  3. cover:替换元素的内容将被缩放以完全覆盖元素的内容框,同时保持其长宽比。这可能会导致内容的一部分在元素的内容框外不可见。
  4. none:替换元素的内容不会被缩放,它将被裁剪以适应元素的内容框。
  5. scale-down:此值的效果等同于none或contain,取决于哪个会导致更小的对象尺寸。

使用场景:

object-fit属性通常用于确保图像或视频在其容器中保持正确的长宽比,避免拉伸或压缩导致的失真。例如,在一个固定大小的容器中展示一个图像时,可以使用object-fit属性来确保图像以最佳方式显示。

object-position 属性

object-position属性用于指定替换元素(如或)的内容在其容器内的位置。通过指定水平和垂直方向的偏移量,可以轻松地调整元素内容在容器内的起始点,实现精准定位。

语法:

object-position属性接受两个值,分别表示水平方向和垂直方向的偏移量。这两个值可以是长度单位(如像素、百分比等),也可以是关键词(如left、right、top、bottom、center)。

例如:

object-position: 50% 50%; 表示将元素内容在容器内水平和垂直方向上都居中显示。
object-position: right top; 表示将元素内容的右上角与容器的右上角对齐。

object-position: 50% 50%:将图像或视频的中心点放置在容器的中心点,默认值。
object-position: top left:将图像或视频的左上角放置在容器的左上角。
object-position: bottom right:将图像或视频的右下角放置在容器的右下角。
object-position: center:将图像或视频的中心点放置在容器的中心点。
object-position: left:将图像或视频的左侧边缘放置在容器的左侧边缘。
object-position: top:将图像或视频的顶部边缘放置在容器的顶部边缘。
object-position: right:将图像或视频的右侧边缘放置在容器的右侧边缘。
object-position: bottom:将图像或视频的底部边缘放置在容器的底部边缘。
object-position: [x-offset] [y-offset]:通过指定偏移量来自定义图像或视频的定位位置,例如object-position: 20% 50%表示将图像或视频的左上角向右偏移20%的容器宽度,向下偏移50%的容器高度。

使用场景:

object-position属性通常与object-fit属性一起使用,以实现更复杂的布局效果。例如,在一个固定大小的容器中展示一个图像,并希望图像以特定的方式显示(如居中、顶部对齐等),可以使用object-fit和object-position属性来共同实现。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/22077.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【android 9】【input】【8.发送按键事件2——InputDispatcher线程】

系列文章目录 本人系列文章-CSDN博客 目录 系列文章目录 1.简介 1.1流程介绍 1.2 时序图 2.普通按键消息发送部分源码分析(按键按下事件) 2.1 开机后分发线程阻塞的地方 2.2 InputDispatcher::dispatchOnceInnerLocked 2.3 InputDispatcher::disp…

使用C语言实现贪吃蛇(超详细)

目录 实现贪吃蛇我们要知道哪些? Easyx图形库 Easyx的安装 游戏思路 游戏实现 头文件的使用 ​编辑和食物以及控制方向的初始化 对于坐标的实现: 食物颜色的实现: 游戏数据的初始化 加载音乐 图形窗口的设置: 蛇身节数…

GEE案例——归一化差异水体指数丰水期、枯水期的水域面积和水深分析(青海湖为例)

简介 水深反演是指利用遥感技术从航空或卫星平台上获取的数据来推断水体的深度信息。这种技术在海洋学、湖泊和河流的科学研究与管理中非常重要。以下是几种常用的水深反演方法: 1. **光学遥感反演**: - 基于水体颜色和透明度的变化与水深的关系,使用光学遥感影像(如L…

【动手学深度学习】多层感知机之暂退法问题研究详情

目录 🌊问题研究1 🌞问题研究2 🌲问题研究3 🌍问题研究4 🌳问题研究5 🌌问题研究6 🌊问题研究1 如果更改第一层和第二层的暂退法概率,会发生什么情况?具体地说&am…

深入理解指针(4)--新手小白都能明白的指针解析

深入理解指针(4)–新手小白都能明白的指针解析 文章目录 深入理解指针(4)--新手小白都能明白的指针解析1. 回调函数2. qsort使用举例2.1 冒泡排序2.2 qsort函数介绍2.3 用冒泡排序实现qsort 结语 1. 回调函数 回调函数就是⼀个通过函数指针调用的函数 如果我们把函数的指针&a…

C++ Primer 类与构造函数 三五法则

前言 本文介绍C中类的基础知识,介绍所有的构造函数,和什么时候应该该写哪些构造函数,并介绍经典的三五法则。 在C中,只是声明一个空类,不做任何事情的话,编译器会自动为你生成如下八个默认函数&#xff1…

Android、Java 中的位运算使用小结

文章目录 位运算符如何记住?实际编程中有什么实际应用呢?1. 权限控制2. 图形处理:3. 网络通信:4. 数据加密:5. 数据压缩:6. 高效计算:7. 底层编程:8. 算法优化:9 .硬件交互:10. 位…

玩转微服务-GateWay

目录 一. 背景二. API网关1. 概念2. API网关定义3. API网关的四大职能4. API网关分类5. 开源API网关介绍6. 开源网关的选择 三. Spring Cloud Gateway1. 文档地址2. 三个核心概念3. 工作流程4. 运行原理4.1 路由原理4.2 RouteLocator 5. Predicate 断言6. 过滤器 Filter6.1. 过…

java —— 字符输入流/字符输出流

字符输入流/输出流,是指以字符为单位进行输入或输出的方式。其与字节输入流/字节输出流的用法如出一辙,只是输入/输出单位由字节改为字符。 一、字符输入流 创建步骤: ① 创建输入源文件的 File 对象:File filenew File("…

[图解]建模相关的基础知识-02

1 00:00:01,530 --> 00:00:05,200 第2个概念,谓词,Predicate 2 00:00:07,530 --> 00:00:10,800 或者叫断言,翻译各种各样都有 3 00:00:12,830 --> 00:00:15,050 实际上就是前面命题 4 00:00:15,060 --> 00:00:16,610 相当于常…

记录Nuxt 3 官网项目的一次部署

本来以为就是一次简单的部署,之前也是部署过几次nuxt项目了,所以,并没有要记录的想法。但是过程出现了很多问题,最后考虑还是写下来吧。留个记录(完整的配置部署过程) 这里我将要说明两种部署方式以供选择&…

开源网安软件安全国产化替代解决方案亮相2024澳门万讯论坛

近日,2024万讯论坛在澳门成功举办。本次论坛由万讯电脑科技主办,旨在引进国内尖端科技厂商,提供全方位的信创解决方案,分享信创化过程中所面临的挑战及阶段性转换经验。开源网安作为拥有软件安全领域全链条产品的厂商,…

如何使用 Vue CLI 创建和管理一个 Vue 项目

Vue CLI 是一个基于 Node.js 的命令行工具,可以快速创建和管理 Vue.js 项目。以下是使用 Vue CLI 创建和管理 Vue 项目的步骤: 1:安装 Vue CLI 打开终端或命令提示符,运行以下命令安装 Vue CLI: npm install -g vue/cli安装完成后,可以使用 vue --version 命令检查…

Analytical Model(分析模型)和Compact model(紧凑模型)有什么不同

Analytical Model(分析模型) 和 Compact Model(紧凑模型) 在电子工程和半导体物理领域有着不同的应用和特点: Analytical Model(分析模型): 理论基础:分析模型基于物理原理和数学公…

jeecg dictText字典值

前端列表的字典值回显,配置了数据字典后,在本地测试可以回显中文的数据, 但在线上服务器不能正常回显出来; 原因是在前端拿到records的列表值时可以拿到dictText的字典,但是线上服务器没有dictText的值; …

聚焦 Navicat 17 新特性 | 模型设计优化与创新

随着 Navicat 17 的正式发布,受到了广泛的关注和讨论。Navicat 产品力又一次大跃迁。新引入的特性显著增强了用户的数据库管理和数据分析体验,包括:模型设计与同步、数据字典、数据分析(data profiling)、用户体验、查…

共享门店模式:快速打造连锁实体店

在数字化浪潮的冲击下,许多线下实体店正面临前所未有的挑战。然而,在这个变革的时代,共享门店模式,也被称为“共享股东”,正以其独特的魅力,为实体店带来新的生机。 一、共享门店模式的崭新定义 共享门店…

​水经微图Web版1.8.0发布

让每一个人都有自己的地图! 水经微图(简称“微图”)新版已上线,在该版本中主要新增了注册登录功能,线与面图层新增矩形、圆或军标等绘制功能,以及其它功能的优化。 现在,为你分享一下本轮迭代…

SELinux:安全增强型Linux

SELinux:安全增强型Linux 作用: 可以保护linux系统的安全为用户分配最小的权限 状态: Enforcing:强制保护Permissive:宽松状态Disabled:禁用 为了安全性考虑,希望SELinux设置为Enforcing状态…

PostgreSQL调优工具:PGTune

PostgreSQL调优工具:PGTune 1,PGTune网址 https://pgtune.leopard.in.ua/#/ 参数解释: DB Version:数据库版本 OS Type:操作系统 DB Type:数据库类型,一般默认即可 Total Memory (RAM)&#x…