当前位置： 首页 > news >正文

一种图片展示的完美方案，图片展示，object-fill

news 2026/5/28 8:28:04

通常一般的处理

 <style>.img-container {width: 300px;height: 200px;background: #f60;}img {width: 100%;height: 100%;}</style>
</head>
<body><div class="img-container"><img src="./行道树.png" alt=""></div>
</body>

在这里插入图片描述
但是如果照片尺寸不符合这个容器的长宽比例，就裂开了

<style>.img-container {width: 100px;height: 200px;background: #f60;}img {width: 100%;height: 100%;}</style>
</head>
<body><div class="img-container"><img src="./行道树.png" alt=""></div>
</body>

在这里插入图片描述

解决图片现实的困局，使用object-fit属性：

contain

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

将会被缩放，在填充的时候会保证宽高比，保证保持宽高比的情况下会添加"黑边"（优点：图片一定会被全貌展示；缺点：黑边的宽度把握不住）

<style>.img-container {width: 150px;height: 300px;background: #f60;}img {width: 100%;height: 100%;object-fit: contain;}</style>
</head>
<body><div class="img-container"><img src="./行道树.png" alt=""></div>
</body>

在这里插入图片描述

cover

保证图片宽高比的同时，会充满整个内容区域，会进行裁剪。不会全貌展示，但是看着比较舒适，具体展示哪一部分，裁剪哪一部分，不可控

<style>.img-container {width: 200px;height: 300px;background: #f60;}img {width: 100%;height: 100%;object-fit: cover;}</style>
</head>
<body><div class="img-container"><img src="./行道树.png" alt=""></div>
</body>

在这里插入图片描述

fill

充满整个内容区域，如果宽高比与内容框不相匹配，那就拉伸图片，以适应内容区（这个属性比较鸡肋，跟裂开的代码别无而致）

<style>.img-container {width: 600px;height: 300px;background: #f60;}img {width: 100%;height: 100%;object-fit: fill;}</style>
</head>
<body><div class="img-container"><img src="./行道树.png" alt=""></div>
</body>

在这里插入图片描述

none

被替换内容将==维持原有的尺寸==。当内容大于容器的时候回进行裁剪，当内容小于容器的时候，会进行居中显示

<style>.img-container {width: 100px;height: 200px;background: #f60;}img {width: 100%;height: 100%;object-fit: none;}</style>
</head>
<body><div class="img-container"><img src="./行道树.png" alt=""></div>
</body>

在这里插入图片描述

 <style>.img-container {width: 600px;height: 400px;background: #f60;}img {width: 100%;height: 100%;object-fit: none;}</style>
</head>
<body><div class="img-container"><img src="./行道树.png" alt=""></div>
</body>

在这里插入图片描述

<style>.img-container {width: 100px;height: 400px;background: #f60;}img {width: 100%;height: 100%;object-fit: none;}</style>
</head>
<body><div class="img-container"><img src="./行道树.png" alt=""></div>
</body>

在这里插入图片描述

scale-down

这个相当于是container 和none 两者的属性，具体使用哪一个，看哪一个的占地内容较少

 <style>.img-container {width: 600px;height: 400px;background: #f60;}img {width: 100%;height: 100%;object-fit: contain;}</style>
</head>
<body><div class="img-container"><img src="./行道树.png" alt=""></div>
</body>

在这里插入图片描述

 <title>Document</title><style>.img-container {width: 600px;height: 400px;background: #f60;}img {width: 100%;height: 100%;object-fit: scale-down;}</style>
</head>
<body><div class="img-container"><img src="./行道树.png" alt=""></div>
</body>

在这里插入图片描述

相关文章：

一种图片展示的完美方案，图片展示，object-fill

通常一般的处理 <style>.img-container {width: 300px;height: 200px;background: #f60;}img {width: 100%;height: 100%;}</style> </head> <body><div class"img-container"><img src"./行道树.png" alt""&g…...

编程日记 2023/2/22 0:50:09

社科院杜兰金融管理硕士——考研初试成绩已出，关于分数“6线”你有了解吗

多地公布了2023考研初试成绩查询时间&#xff0c;部分省份今日就能查询到考研初试成绩&#xff0c;考研学子们此刻的心情应该是很忐忑吧&#xff0c;关于分数的“6线”你都知道有哪些吗&#xff1f;我们跟随社科院杜兰金融管理硕士项目一起去了解一下。1.国家线教育部依据硕士生…...

编程日记 2023/2/22 0:49:01

Talk | 清华大学交叉信息研究院助理教授杜韬：利用计算方法探究流固耦合

本期为TechBeat人工智能社区第474期线上Talk&#xff01; 北京时间2月15日(周三)20:00&#xff0c;清华大学交叉信息研究院助理教授——杜韬的Talk将准时在TechBeat人工智能社区开播&#xff01; 他与大家分享的主题是: “利用计算方法探究流固耦合”&#xff0c;届时将介绍流固…...

编程日记 2023/2/22 0:47:56

2023年，智能家居实体门店如何选品？

作者 | 启明 编辑 | 小沐 出品 | 智哪儿 zhinaer.cn2023年&#xff0c;是智能家居实体门店的机会与破局之年&#xff0c;作为智能家居实体门店老板&#xff0c;我们应该具备什么样的增长思维呢&#xff1f;上篇文章智哪儿谈了智能家居增长思维之流量思维 &#xff0c;这篇文章我…...

编程日记 2023/2/22 0:46:47

数据分析-深度学习 NLP Day2关键词提取案例

训练一个关键词提取算法需要以下几个步骤&#xff1a;1&#xff09;加载已有的文档数据集&#xff1b;2&#xff09;加载停用词表&#xff1b;3&#xff09;对数据集中的文档进行分词&#xff1b;4&#xff09;根据停用词表&#xff0c;过滤干扰词&#xff1b;5&#xff09;根据…...

编程日记 2023/2/22 0:45:41

LeetCode题解：938. 二叉搜索树的范围和，BFS，JavaScript，详细注释

原题链接&#xff1a; https://leetcode.cn/problems/range-sum-of-bst/ 解题思路&#xff1a; 对于二叉搜索树的任意节点&#xff0c;左子树的所有节点值都小于它的值&#xff0c;右子树的所有节点值都小于它的值。使用队列进行BFS搜索&#xff0c;如果当前节点的值小于low&…...

编程日记 2023/2/22 0:44:37

istio初步了解

istio 控制平面&#xff1a; Pilot&#xff1a;管理和配置部署在特定istio服务网格中的所有sidecar代理实例&#xff0c;管理sidecar代理之间的路由流量规则&#xff0c;并配置故障恢复功能&#xff0c;如超时、重试、熔断。 Citadel&#xff1a;istio中负责身份认证和证书管…...

编程日记 2023/2/22 0:43:31

【模板】用HTML编写邮件正文 | 各大邮箱几乎都会过滤css样式、js脚本等效果，如何用基础HTML编写？

用HTML编写邮件正文 文档 编码格式utf-8&#xff08;使用记事本或其他工具打开&#xff0c;在文件->另存为&#xff0c;编缉选择UTF-8格式&#xff09; 文档大小在15kb以内 样式 页面宽度&#xff1a;600px~800px 尽量用特殊元素以及元素属性代替样式 样式全部写为内联样式…...

编程日记 2023/2/22 0:42:25

华为云计算之双活容灾

双活&#xff08;HyperMetro&#xff09;本地双活&#xff1a;距离≤10km同城双活&#xff1a;距离&#xff1e;10km没有主备之分&#xff0c;只有本端数据中心和远端数据中心。当一个数据中心的设备故障或数据中心故障&#xff0c;业务会自动切换到另一个数据中心继续运行&…...

编程日记 2023/2/22 0:41:21

ASEMI高压MOS管ASE20N65SE体积，ASE20N65SE大小

编辑-Z ASEMI高压MOS管ASE20N65SE参数&#xff1a; 型号&#xff1a;ASE20N65SE 漏极-源极电压&#xff08;VDS&#xff09;&#xff1a;650V 栅源电压&#xff08;VGS&#xff09;&#xff1a;30V 漏极电流&#xff08;ID&#xff09;&#xff1a;20A 功耗&#xff08;P…...

编程日记 2023/2/22 0:40:13

resp连接redis服务器

修改redis的配置文件使得windows的图形界面客户端可以连接redis服务器 resp安装好以后&#xff0c;可以在linux端打开redis.conf中做以下操作&#xff0c;使得windows的图形界面客户端可以连接redis服务器 方法一&#xff1a; 1&#xff0c;在redis.conf文件中添加bind 在文件…...

编程日记 2023/2/22 0:39:06

七天实现一个分布式缓存

目录教程来源目的思路缓存淘汰(失效)算法&#xff1a;FIFO&#xff0c;LFU 和 LRUFIFO(First In First Out)LFU(Least Frequently Used)LRU(Least Recently Used)实现Lru查找功能删除新增/修改测试单机并发缓存主体结构 Group回调 GetterGroup 的定义Group 的 Get 方法HTTP 服务…...

编程日记 2023/2/22 0:38:00

电子招标采购系统源码功能清单

一、立项管理 1、招标立项申请 功能点&#xff1a;招标类项目立项申请入口&#xff0c;用户可以保存为草稿&#xff0c;提交。 2、非招标立项申请 功能点&#xff1a;非招标立项申请入口、用户可以保存为草稿、提交。 3、采购立项列表 功能点&#xff1a;对草稿进行编辑&#x…...

编程日记 2023/2/22 0:36:56

mysql数据库基础知识

一.mysql基本命令 1.基础常用命令 mysql -uroot -p密码;(也可以不带密码&#xff0c;之后输入) 本地登录 mysql -h 登录ip -p 端口(通常3306&#xff09; -uroot -p密码; 远程登录 desc 表名;查看表的各个字段的属性&#xff0c;以及自增键 mysqldump -u用户 -p 数据库名 >…...

编程日记 2023/2/22 0:35:51

CAN总线通信

CAN总线通信 CAN 是控制器局域网络&#xff08;Controller Area Network&#xff09; 的缩写&#xff0c;是 ISO 国际标准化的串行通信协议。 CAN是半双工通信 CAN总线特点 (1) 多主控制 在总线空闲时&#xff0c;所有的单元都可开始发送消息&#xff08;多主控制&#xf…...

编程日记 2023/2/22 0:34:45

MATLAB/Simulink 通信原理及仿真学习（二）

文章目录MATLAB/Simulink 通信原理及仿真学习&#xff08;二&#xff09;simulink仿真常用的Simulink库1. 信号源模块库2. 数序运算模块3. 信号输出模块库4.仿真搭建5.搭建自己的库6.S-函数编写MATLAB/Simulink 通信原理及仿真学习&#xff08;二&#xff09; simulink仿真 交…...

编程日记 2023/2/22 0:33:40

CentOS7 防火墙（firewall）的操作命令

CentOS7 防火墙&#xff08;firewall&#xff09;的操作命令 安装&#xff1a;yum install firewalld 1、firewalld的基本使用 启动&#xff1a; systemctl start firewalld 查看状态&#xff1a; systemctl status firewalld 禁用&#xff0c;禁止开机启动&#xff1a; s…...

编程日记 2023/2/22 0:32:35

文献工具汇总：论文查找、文献管理、文献翻译

科研人员论文哪里找&#xff1f;文献如何管理&#xff1f;本文给推荐一些提高论文阅读写作效率的一些资料&#xff0c;包括查找论文、文献管理、文献翻译等方面。 一、查找文献 PMC&#xff08;Pubmed Cenral) Pubmed官方系统中&#xff0c;将免费的全文集中在此&#xff0c…...

编程日记 2023/2/22 0:31:26

SQL零基础入门学习（三）

SQL零基础入门学习&#xff08;二&#xff09; SQL WHERE 子句 WHERE 子句用于提取那些满足指定条件的记录。 SQL WHERE 语法 SELECT column1, column2, ... FROM table_name WHERE condition;参数说明&#xff1a; column1, column2, …&#xff1a;要选择的字段名称&…...

编程日记 2023/2/22 0:30:20

苹果手机如何快速的直接从相册里面的图片提取文字？

//在线工具地址https://ocr.bytedance.zj.cn/image/ImageText在当今信息爆炸的时代&#xff0c;图文并茂已经成为了一个广告宣传的常用方式。然而&#xff0c;图片中的文字信息往往难以获取&#xff0c;尤其对于那些需要快速获取信息的人们来说&#xff0c;阅读图片中的文字会是…...

编程日记 2023/2/22 0:29:15

Jetson Orin Nano 升级jetpack5.1.2刷机过程记录

一.刷机起因 orin nano 接了个IMX477的摄像头,用 命令行DISPLAY:0.0 nvgstcapture-1.0 显示的画面有撕裂,让卖家查问题,卖家测试没有撕裂,对比环境,orin nano出厂默认的是jetpack5.1.1,卖家用的jetpack5.1.2版本,为了解决差异,要升级jetpack版本,前后搞了2天半,记录一下. 另外…...

编程新知 2026/5/26 4:48:24

保姆级教程：在CentOS 7上用达梦8搭建DCA练习环境（附ulimit、VNC、ODBC全配置）

达梦8 DCA认证实战&#xff1a;CentOS 7环境搭建与调优全指南 在国产数据库技术快速发展的今天&#xff0c;达梦数据库作为核心产品之一&#xff0c;其DCA认证已成为众多从业者提升竞争力的重要选择。与理论为主的认证不同&#xff0c;DCA更注重实际操作能力&#xff0c;而一个…...

编程新知 2026/5/26 3:38:09

Taotoken的TokenPlan套餐如何实现更经济的模型调用

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 Taotoken的TokenPlan套餐如何实现更经济的模型调用 1. 理解TokenPlan的计费模式 在模型应用开发过程中&#xff0c;成本的可预测性…...

编程新知 2026/5/26 3:15:58

告别网盘客户端！用Alist+RaiDrive把百度云盘变成电脑本地文件夹（保姆级图文教程）

用AlistRaiDrive实现网盘本地化管理的终极方案 你是否厌倦了电脑上安装多个网盘客户端&#xff0c;不仅占用系统资源&#xff0c;操作还繁琐割裂&#xff1f;每次上传下载文件都要在不同客户端间切换&#xff0c;效率低下。现在&#xff0c;通过Alist和RaiDrive的组合&#xf…...

编程新知 2026/5/26 2:49:47

智能手机相机光谱特性测量与多光谱成像技术

1. 智能手机相机光谱特性测量基础智能手机相机的光谱灵敏度函数(Spectral Sensitivity Function, SSF)和透射率函数是计算摄影领域的核心参数&#xff0c;它们决定了设备对光信号的响应特性。准确获取这些参数对色彩还原、光谱重建和白平衡校准等任务至关重要。1.1 光谱灵敏度函…...

编程新知 2026/5/26 2:25:34

从社交关系到分子结构：图解GCN（图卷积网络）到底在‘看’什么？

从社交关系到分子结构&#xff1a;图解GCN&#xff08;图卷积网络&#xff09;到底在‘看’什么&#xff1f;想象一下&#xff0c;你刚搬到一个新社区&#xff0c;想快速了解周围的邻居。最直接的方式是什么&#xff1f;不是挨家挨户敲门&#xff0c;而是通过社区活动认识几位关…...

编程新知 2026/5/26 2:11:27

对比 Token Plan 与按量计费在 Taotoken 平台上的成本体感差异

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 对比 Token Plan 与按量计费在 Taotoken 平台上的成本体感差异 对于个人开发者或项目管理者而言&#xff0c;在接入大模型服务时&a…...

编程新知 2026/5/26 1:13:04

RevSSH反向SSH隧道：无公网IP设备的安全远程运维方案

1. 这不是又一个SSH封装工具——RevSSH解决的是“根本性连接悖论”你有没有遇到过这样的场景&#xff1a;一台部署在客户内网的嵌入式设备&#xff0c;没有公网IP&#xff0c;NAT穿透失败&#xff0c;防火墙策略死死锁住所有入向端口&#xff0c;连ICMP都被禁了&#xff1b;或者…...

编程新知 2026/5/25 21:47:59

TVA注意力层INT8量化配置技巧

重磅预告&#xff1a;本专栏将独家连载系列丛书《智能体视觉技术与应用》部分精华内容&#xff0c;该书是世界首套系统阐述“因式智能体”视觉理论与实践的专著&#xff0c;特邀美国 TypeOne 公司首席科学家、斯坦福大学博士 Bohan 担任技术顾问。Bohan先生师从美国三院院士、“…...

编程新知 2026/5/25 21:25:47

二十六.签名与脚本(1)--脚本介绍

1.区块链脚本介绍在之前的章节中&#xff0c;我们了解了签名与验证相关&#xff0c;但是btc的交易数据&#xff0c;签名和验证&#xff0c;不是单纯的&#xff0c;还有脚本深度参与其中。我们从开始来&#xff1a;bool SendMoney(CScript scriptPubKey, int64 nValue, CWalletT…...

编程新知 2026/5/25 21:23:41