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

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

news 2026/3/31 22:09:47

通常一般的处理

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

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

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

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

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

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

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

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

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

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

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

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

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

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

istio初步了解

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

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

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

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

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

华为云计算之双活容灾

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

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

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

编辑-Z ASEMI高压MOS管ASE20N65SE参数： 型号：ASE20N65SE 漏极-源极电压（VDS）：650V 栅源电压（VGS）：30V 漏极电流（ID）：20A 功耗（P…...

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

resp连接redis服务器

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

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

七天实现一个分布式缓存

目录教程来源目的思路缓存淘汰(失效)算法：FIFO，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、招标立项申请功能点：招标类项目立项申请入口，用户可以保存为草稿，提交。 2、非招标立项申请功能点：非招标立项申请入口、用户可以保存为草稿、提交。 3、采购立项列表功能点：对草稿进行编辑&#x…...

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

mysql数据库基础知识

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

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

CAN总线通信

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

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

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

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

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

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

CentOS7 防火墙（firewall）的操作命令安装：yum install firewalld 1、firewalld的基本使用启动： systemctl start firewalld 查看状态： systemctl status firewalld 禁用，禁止开机启动： s…...

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

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

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

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

SQL零基础入门学习（三）

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

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

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

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

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

拯救数字青春：GetQzonehistory让QQ空间记忆永久安家

拯救数字青春：GetQzonehistory让QQ空间记忆永久安家【免费下载链接】GetQzonehistory 获取QQ空间发布的历史说说项目地址: https://gitcode.com/GitHub_Trending/ge/GetQzonehistory 在这个信息爆炸的时代，我们的青春记忆正以数据形式储存在各大…...

编程新知 2026/3/31 21:43:09

晶闸管全球市场：2026-2032年CAGR为3.4%

据恒州诚思调研统计，2025年全球晶闸管收入规模约59.96亿元，到2032年收入规模将接近75.71亿元，2026-2032年CAGR为3.4%。晶闸管作为功率半导体领域的核心器件，凭借其独特的性能在众多电力电子场景中发挥着关键作用。全球晶闸管&…...

编程新知 2026/3/31 21:41:08

【小白友好】Qwen2.5-VL-7B-Instruct快速上手：无需代码的图文智能问答工具

Qwen2.5-VL-7B-Instruct快速上手：无需代码的图文智能问答工具 1. 工具简介 Qwen2.5-VL-7B-Instruct是一款基于阿里通义千问多模态大模型的视觉交互工具，专为RTX 4090显卡优化。它最大的特点是完全可视化操作，无需编写任何代码就能实现强大的…...

编程新知 2026/3/31 21:33:04

FPGA新手必看：Vivado 2023.1里用DDS IP核生成1MHz正弦波，附完整仿真代码

FPGA实战：从零构建1MHz正弦波生成器的Vivado全流程解析刚拿到FPGA开发板时，我最想实现的第一个项目就是信号发生器。看着示波器上跳动的波形从自己编写的代码中产生，这种成就感无可替代。本文将带你用Xilinx Vivado 2023.1中的DDS IP核&…...

编程新知 2026/3/31 19:59:33

Dockle在大型项目中的应用：多镜像批量扫描与报告生成完整指南

Dockle在大型项目中的应用：多镜像批量扫描与报告生成完整指南【免费下载链接】dockle Container Image Linter for Security, Helping build the Best-Practice Docker Image, Easy to start 项目地址: https://gitcode.com/gh_mirrors/do/dockle Dockle是一…...

编程新知 2026/3/31 18:03:36

【DexGraspNet与多指手抓取算法详解】第六章运动规划与轨迹优化

目录第六章运动规划与轨迹优化 6.1 从静态姿态到动态轨迹 6.1.1 抓取前运动规划 6.1.1.1 快速扩展随机树 (RRT) 6.1.1.1.1 状态空间采样 6.1.1.1.2 碰撞检测机制 6.1.1.2 轨迹平滑处理 6.1.1.2.1 B样条插值 6.1.1.2.2 速度与加速度约束 6.2 基于优化的轨迹生成 6.…...

编程新知 2026/3/31 17:02:42

nuScenes数据集避坑指南：从数据下载到多模态可视化完整流程

nuScenes数据集实战全解析：从环境搭建到多模态融合可视化自动驾驶研究离不开高质量的数据集支持，而nuScenes作为目前最全面的多模态自动驾驶数据集之一，包含了丰富的传感器数据和精细的标注信息。但在实际使用过程中，从数据下载到…...

编程新知 2026/3/31 16:11:47

Alpamayo-R1-10B实战案例：自动驾驶算法工程师日常调试VLA模型工作流

Alpamayo-R1-10B实战案例：自动驾驶算法工程师日常调试VLA模型工作流 1. 项目概述 Alpamayo-R1-10B是专为自动驾驶研发设计的开源视觉-语言-动作(VLA)模型，基于100亿参数架构构建。这套工具链包含AlpaSim模拟器和Physical AI AV数据集，旨在通…...

编程新知 2026/3/31 15:29:14