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

devtools/2024/10/11 11:18:44/

目录

  • 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.ppmy.cn/devtools/46347.html

相关文章

[数据分享]人口密度数据

数据是GIS的重要组成部分,也是我们进行研究分析的基础。在日常工作中,我们时常因数据问题而犯难,今天就进行一波有关人口密度数据的分享。 补充一点:排名不分先后,数据类型各异,请根据个人需要仔细甄别。 …

C++ Thread多线程并发记录(3)线程创建总结

1.启动线程传递全局函数 #include <iostream> #include <thread>void Th1(int id){std::cout << "Create global fun. id " << id << std::endl; } void TH1(const int &id){std::cout << "Create global fun. id &…

【UE5 刺客信条动态地面复刻】实现无界地面01:动态生成

2024.6.4更新 昨天半夜意识到生成Cube的方案不合适&#xff0c;又开始到处找动态地面的方法&#xff0c;发现了我想要的效果直接可以用nigara实现&#xff01;&#xff01;&#xff01;&#xff01; 于是这个部分就暂时告一段落&#xff0c;今季开始新的方向的学习。 为了快速…

Python SQLAlchemy ORM的with_entities方法了解和简单使用

with_entities 是 SQLAlchemy ORM 中一个非常有用的方法&#xff0c;它允许你在查询时指定返回哪些列或表达式&#xff0c;从而精确地控制查询结果的内容。这可以帮助减少不必要的数据传输和内存使用&#xff0c;提高查询性能。 以下是关于 with_entities 方法的详细解释&#…

[数据集][目标检测]焊接处缺陷检测数据集VOC+YOLO格式3400张8类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;3400 标注数量(xml文件个数)&#xff1a;3400 标注数量(txt文件个数)&#xff1a;3400 标注…

YOLOv10训练自己的数据集

目录 0、引言 1、环境配置 2、数据集准备 3、创建配置文件 3.1、设置官方配置文件&#xff1a;default.yaml&#xff0c;可自行修改。 3.2、设置data.yaml 4、进行训练 4.1、方法一 4.2、方法二 5、验证模型 5.1、命令行输入 5.2、脚本运行 6、总结 0、引言 本文…

C# 工商银行缺少infosecapiLib.infosec

搜索Tlbimp.exe 这里使用4.8.1下的处理&#xff0c;以管理员身份打开powershell cd "C:\Program Files (x86)\Microsoft SDKs\Windows\v10.0A\bin\NETFX 4.8.1 Tools".\TlbImp.exe "G:\CSharp\icbc-api-sdk-cop-c#\sdk-cop\sdk-cop\dll\infosecapi.dll" …

TypeScript 中的声明合并

1. 声明合并的概念 声明合并是指当 TypeScript 遇到多个同名的声明时&#xff0c;会将它们合并为一个单一的声明。这使得开发者可以分散地定义同一个实体的不同部分&#xff0c;最终将它们合并为一个整体。在进行声明合并时&#xff0c;TypeScript 会根据不同类型的声明进行不…