CSS 中 object-fit 的 cover 和 contain

前言:object-fit 属性用于指定可替换元素(如`<img>`、`<video>`等)如何适应其容器。

一、视觉效果

1. object-fit: cover

此值会使被替换元素完全覆盖容器,同时保持其宽高比。这意味着元素可能会被裁剪以适应容器的尺寸。

2. object-fit: contain

此值会使被替换元素在保持其宽高比的情况下完全显示在容器内。这意味着容器可能会有空白区域,因为元素不会被拉伸或裁剪以填满整个容器。

二、应用场景

1. object-fit: cover

当你希望确保图片或视频完全覆盖容器,并且不介意部分内容被裁剪时,可以使用`cover`。例如,在全屏背景图像或响应式设计中,需要确保图像始终填满容器,即使这意味着裁剪一部分图像。

常用于需要强烈视觉冲击力的页面布局,或者当图片的内容不是关键信息,而整体的视觉效果更为重要时。

2. object-fit: contain

当你希望确保图片或视频完整显示,不被裁剪,同时又能适应容器的大小时,可以使用`contain`。例如,在展示图片库或需要确保用户能够看到完整图像内容的情况下,使用`contain`可以保证图像的完整性。

常用于需要展示重要信息的图片或视频,或者当保持图像的原始比例和内容完整性至关重要时。

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

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

相关文章

Linux shell编程学习笔记84:tee命令——显示保存两不误

0 引言 在前面的学习笔记中&#xff0c;我们经常使用echo命令和输出重定向来生成脚本文件或演示文件&#xff0c;其实Linux提供了一个可以从标准输入读取数据&#xff0c;并输出成文件的命令——tee。 1 tee命令 的帮助信息、功能、命令格式、选项和参数说明 1.1 tee命令 的…

OpenCV-指纹识别

文章目录 一、意义二、代码实现1.计算匹配点2.获取编号3.获取姓名4.主函数 三、总结 一、意义 使用OpenCV进行指纹识别是一个复杂且挑战性的任务&#xff0c;因为指纹识别通常需要高精度的特征提取和匹配算法。虽然OpenCV提供了多种图像处理和计算机视觉的工具&#xff0c;但直…

软件测试学习笔记丨Pytest 学习指南

本文转自测试人社区&#xff0c;原文链接&#xff1a;https://ceshiren.com/t/topic/32336 基本介绍 pytest框架是一个成熟&#xff0c;全面的测试框架&#xff0c;具有非常丰富的第三方插件&#xff0c;并且可以自定义扩展 比如&#xff1a;pytest-selenium , pytest-html ,…

MySQL高阶2004-职员招聘人数

目录 题目 准备数据 分析数据 实现 题目 一家公司想雇佣新员工。公司的工资预算是 70000 美元。公司的招聘标准是&#xff1a; 雇佣最多的高级员工。在雇佣最多的高级员工后&#xff0c;使用剩余预算雇佣最多的初级员工。 编写一个SQL查询&#xff0c;查找根据上述标准雇…

elasticsearch 写入新数据测试(二)

背景:elasticsearch单个node节点写入数据-CSDN博客 需要设置密码才能作为外部调用,不设置我不会用。设置方法见上一篇。 设置密码出现如下问题: Unexpected response code [503] from calling PUT http://172.19.0.1:9200/_security/user/apm_system/_password?pretty …

net core mvc 数据绑定 《1》

其它的绑定 跟net mvc 一样 》》MVC core 、framework 一样 1 模型绑定数组类型 2 模型绑定集合类型 3 模型绑定复杂的集合类型 4 模型绑定源 》》》》 模型绑定 使用输入数据的原生请求集合是可以工作的【request[],Querystring,request.from[]】&#xff0c; 但是从可读…

unity一键注释日志和反注释日志

开发背景&#xff1a;游戏中日志也是很大的开销&#xff0c;虽然有些日志不打印但是毕竟有字符串的开销&#xff0c;甚至有字符串拼接的开销&#xff0c;有些还有装箱和拆箱的开销&#xff0c;比如Debug.Log(1) 这种 因此需要注释掉&#xff0c;当然还需要提供反注释的功能&am…

ide 使用技巧与插件推荐

ide 使用技巧与插件推荐 一、IDE 使用技巧 1. 快捷键 掌握常用快捷键&#xff1a; Windows: 使用 Ctrl、Alt 和 Shift 的组合。 Mac: 使用 Cmd、Option 和 Shift。 常用快捷键示例&#xff1a; VS Code: Ctrl P: 快速打开文件。 Ctrl Shift P: 打开命令面板。 Ctrl /…

前端 vue3 对接科大讯飞的语音在线合成API

主要的功能就是将文本转为语音&#xff0c;可以播放。 看了看官方提供的demo&#xff0c;嗯....没看懂。最后还是去网上找的。 网上提供的案例&#xff0c;很多都是有局限性的&#xff0c;我找的那个他只能读取第一段数据&#xff0c;剩下的不读取。 科大讯飞的接口&#xf…

监控告警功能详细介绍及操作演示:运维团队的智能保障

在当今这个信息化高速发展的时代&#xff0c;运维团队面临着前所未有的挑战。为了确保系统的稳定性和高效运维&#xff0c;监控告警功能成为了运维团队不可或缺的得力助手。本文将详细介绍我们的监控告警功能&#xff0c;并结合实际操作页面进行演示&#xff0c;帮助运维团队更…

25中国烟草校园招聘面试问题总结 烟草面试全流程及面试攻略

开头附上工作招聘面试必备问题噢~~包括综合面试题、无领导小组面试题资源文件免费&#xff01;全文干货。 工作招聘无领导小组面试全攻略最常见面试题&#xff08;第一部分&#xff09;共有17章可用于国企私企合资企业工作招聘面试面试必备心得面试总结资源-CSDN文库https://d…

springboot整合seata

一、准备 docker部署seata-server 1.5.2参考&#xff1a;docker安装各个组件的命令 二、springboot集成seata 2.1 引入依赖 <dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-starter-alibaba-seata</artifactId>&…

sql 时间交集

任务&#xff08;取时间交集&#xff09; 前端输入开始时间和结束时间&#xff0c;通过sql筛选出活动开始时间和活动结束时间再开时时间和结束时间有交集的活动 想法&#xff1a; 前后一段时间内遇到了类似取交集的&#xff0c;从网上找到了两种写法&#xff0c;再结合GPT等…

【架构】NewSQL

文章目录 NewSQLTiDBTiDB 主要组件特点使用场景安装与部署 推荐阅读 NewSQL NewSQL是一种数据库管理系统(DBMS)的类别&#xff0c;它结合了NoSQL数据库的可扩展性和传统SQL数据库的事务一致性。具体来说&#xff0c;NewSQL数据库旨在解决传统关系型数据库在处理大规模并发事务…

C# C++ 笔记

第一阶段知识总结 lunix系统操作 1、基础命令 &#xff08;1&#xff09;cd cd /[目录名] 打开指定文件目录 cd .. 返回上一级目录 cd - 返回并显示上一次目录 cd ~ 切换到当前用户的家目录 &#xff08;2&#xff09;pwd pwd 查看当前所在目录路径 pwd -L 打印当前物理…

[大语言模型-论文精读] 利用多样性进行大型语言模型预训练中重要数据的选择

[大语言模型-论文精读] 利用多样性进行大型语言模型预训练中重要数据的选择 论文信息&#xff1a; Harnessing Diversity for Important Data Selection in Pretraining Large Language Models Authors: Chi Zhang, Huaping Zhong, Kuan Zhang, Chengliang Chai, Rui Wang, X…

Techpoint(科点)—TP2912-GB 视频编码器芯片详解

写在前面 本系列文章主要讲解Techpoint(科点)—TP2912-GB 视频编码器芯片的相关知识,希望能帮助更多的同学认识和了解Techpoint(科点)—TP2912-GB 视频编码器芯片。 若有相关问题,欢迎评论沟通,共同进步。(*^▽^*) 此次架构中TP2912-GB作为视频编码器使用,下面将详细…

软件架构设计师教程 第15章 15.1-2 SOA概念及历史 笔记

15.1 SOA的相关概念 15.1.1 SOA的定义 面向服务的体系结构 (Service-Oriented Architecture,SOA)&#xff0c; 从应用角度定义&#xff0c;SOA是一种应用框架&#xff0c;关注日常的业务应用&#xff0c;将它们划分为单独的业务功能和流程。 从软件的基本原理定义&#xff…

VIRTUOSO集成电路设计工具快捷键

VIRTUOSO集成电路设计工具快捷键 原理图设计中的快捷键 i 插入元件q 显示元件编辑窗口e 进入下层ctrl e 回到上层w 画连线t 插入网络名c 拷贝m 移动 版图设计中的快捷键 Z - 放大&#xff08;Zoom In&#xff09;&#xff1a;按下 Z 键&#xff0c;然后在布局窗口中点击并拖…

linux下sudo执行的程序会有一个额外的进程的问题

当我们执行一个可执行文件时&#xff0c;有可能需要一些更高的权限&#xff0c;为此我们会用sudo ./test的方法执行&#xff0c;这时候我们通过ps aux | grep ./test去查看进程&#xff0c;会发现多出来一个 sudo ./test 的进程&#xff0c;该进程被杀死后&#xff0c;发现目标…