一种图片展示的完美方案,图片展示,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=""></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…...
社科院杜兰金融管理硕士——考研初试成绩已出,关于分数“6线”你有了解吗
多地公布了2023考研初试成绩查询时间,部分省份今日就能查询到考研初试成绩,考研学子们此刻的心情应该是很忐忑吧,关于分数的“6线”你都知道有哪些吗?我们跟随社科院杜兰金融管理硕士项目一起去了解一下。1.国家线教育部依据硕士生…...
Talk | 清华大学交叉信息研究院助理教授杜韬:利用计算方法探究流固耦合
本期为TechBeat人工智能社区第474期线上Talk! 北京时间2月15日(周三)20:00,清华大学交叉信息研究院助理教授——杜韬的Talk将准时在TechBeat人工智能社区开播! 他与大家分享的主题是: “利用计算方法探究流固耦合”,届时将介绍流固…...
2023年,智能家居实体门店如何选品?
作者 | 启明 编辑 | 小沐 出品 | 智哪儿 zhinaer.cn2023年,是智能家居实体门店的机会与破局之年,作为智能家居实体门店老板,我们应该具备什么样的增长思维呢?上篇文章智哪儿谈了智能家居增长思维之流量思维 ,这篇文章我…...
数据分析-深度学习 NLP Day2关键词提取案例
训练一个关键词提取算法需要以下几个步骤:1)加载已有的文档数据集;2)加载停用词表;3)对数据集中的文档进行分词;4)根据停用词表,过滤干扰词;5)根据…...
LeetCode题解:938. 二叉搜索树的范围和,BFS,JavaScript,详细注释
原题链接: https://leetcode.cn/problems/range-sum-of-bst/ 解题思路: 对于二叉搜索树的任意节点,左子树的所有节点值都小于它的值,右子树的所有节点值都小于它的值。使用队列进行BFS搜索,如果当前节点的值小于low&…...
istio初步了解
istio 控制平面: Pilot:管理和配置部署在特定istio服务网格中的所有sidecar代理实例,管理sidecar代理之间的路由流量规则,并配置故障恢复功能,如超时、重试、熔断。 Citadel:istio中负责身份认证和证书管…...
【模板】用HTML编写邮件正文 | 各大邮箱几乎都会过滤css样式、js脚本等效果,如何用基础HTML编写?
用HTML编写邮件正文 文档 编码格式utf-8(使用记事本或其他工具打开,在文件->另存为,编缉选择UTF-8格式) 文档大小在15kb以内 样式 页面宽度:600px~800px 尽量用特殊元素以及元素属性代替样式 样式全部写为内联样式…...
华为云计算之双活容灾
双活(HyperMetro)本地双活:距离≤10km同城双活:距离>10km没有主备之分,只有本端数据中心和远端数据中心。当一个数据中心的设备故障或数据中心故障,业务会自动切换到另一个数据中心继续运行&…...
ASEMI高压MOS管ASE20N65SE体积,ASE20N65SE大小
编辑-Z ASEMI高压MOS管ASE20N65SE参数: 型号:ASE20N65SE 漏极-源极电压(VDS):650V 栅源电压(VGS):30V 漏极电流(ID):20A 功耗(P…...
resp连接redis服务器
修改redis的配置文件使得windows的图形界面客户端可以连接redis服务器 resp安装好以后,可以在linux端打开redis.conf中做以下操作,使得windows的图形界面客户端可以连接redis服务器 方法一: 1,在redis.conf文件中添加bind 在文件…...
七天实现一个分布式缓存
目录教程来源目的思路缓存淘汰(失效)算法:FIFO,LFU 和 LRUFIFO(First In First Out)LFU(Least Frequently Used)LRU(Least Recently Used)实现Lru查找功能删除新增/修改测试单机并发缓存主体结构 Group回调 GetterGroup 的定义Group 的 Get 方法HTTP 服务…...
电子招标采购系统源码功能清单
一、立项管理 1、招标立项申请 功能点:招标类项目立项申请入口,用户可以保存为草稿,提交。 2、非招标立项申请 功能点:非招标立项申请入口、用户可以保存为草稿、提交。 3、采购立项列表 功能点:对草稿进行编辑&#x…...
mysql数据库基础知识
一.mysql基本命令 1.基础常用命令 mysql -uroot -p密码;(也可以不带密码,之后输入) 本地登录 mysql -h 登录ip -p 端口(通常3306) -uroot -p密码; 远程登录 desc 表名;查看表的各个字段的属性,以及自增键 mysqldump -u用户 -p 数据库名 >…...
CAN总线通信
CAN总线通信 CAN 是控制器局域网络(Controller Area Network) 的缩写,是 ISO 国际标准化的串行通信协议。 CAN是半双工通信 CAN总线特点 (1) 多主控制 在总线空闲时,所有的单元都可开始发送消息(多主控制…...
MATLAB/Simulink 通信原理及仿真学习(二)
文章目录MATLAB/Simulink 通信原理及仿真学习(二)simulink仿真常用的Simulink库1. 信号源模块库2. 数序运算模块3. 信号输出模块库4.仿真搭建5.搭建自己的库6.S-函数编写MATLAB/Simulink 通信原理及仿真学习(二) simulink仿真 交…...
CentOS7 防火墙(firewall)的操作命令
CentOS7 防火墙(firewall)的操作命令 安装:yum install firewalld 1、firewalld的基本使用 启动: systemctl start firewalld 查看状态: systemctl status firewalld 禁用,禁止开机启动: s…...
文献工具汇总:论文查找、文献管理、文献翻译
科研人员论文哪里找?文献如何管理?本文给推荐一些提高论文阅读写作效率的一些资料,包括查找论文、文献管理、文献翻译等方面。 一、查找文献 PMC(Pubmed Cenral) Pubmed官方系统中,将免费的全文集中在此,…...
SQL零基础入门学习(三)
SQL零基础入门学习(二) SQL WHERE 子句 WHERE 子句用于提取那些满足指定条件的记录。 SQL WHERE 语法 SELECT column1, column2, ... FROM table_name WHERE condition;参数说明: column1, column2, …:要选择的字段名称&…...
苹果手机如何快速的直接从相册里面的图片提取文字?
//在线工具地址https://ocr.bytedance.zj.cn/image/ImageText在当今信息爆炸的时代,图文并茂已经成为了一个广告宣传的常用方式。然而,图片中的文字信息往往难以获取,尤其对于那些需要快速获取信息的人们来说,阅读图片中的文字会是…...
Linux 文件类型,目录与路径,文件与目录管理
文件类型 后面的字符表示文件类型标志 普通文件:-(纯文本文件,二进制文件,数据格式文件) 如文本文件、图片、程序文件等。 目录文件:d(directory) 用来存放其他文件或子目录。 设备…...
基于FPGA的PID算法学习———实现PID比例控制算法
基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容:参考网站: PID算法控制 PID即:Proportional(比例)、Integral(积分&…...
React hook之useRef
React useRef 详解 useRef 是 React 提供的一个 Hook,用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途,下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...
关于nvm与node.js
1 安装nvm 安装过程中手动修改 nvm的安装路径, 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解,但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后,通常在该文件中会出现以下配置&…...
页面渲染流程与性能优化
页面渲染流程与性能优化详解(完整版) 一、现代浏览器渲染流程(详细说明) 1. 构建DOM树 浏览器接收到HTML文档后,会逐步解析并构建DOM(Document Object Model)树。具体过程如下: (…...
Linux-07 ubuntu 的 chrome 启动不了
文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了,报错如下四、启动不了,解决如下 总结 问题原因 在应用中可以看到chrome,但是打不开(说明:原来的ubuntu系统出问题了,这个是备用的硬盘&a…...
C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。
1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj,再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...
基于matlab策略迭代和值迭代法的动态规划
经典的基于策略迭代和值迭代法的动态规划matlab代码,实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...
10-Oracle 23 ai Vector Search 概述和参数
一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI,使用客户端或是内部自己搭建集成大模型的终端,加速与大型语言模型(LLM)的结合,同时使用检索增强生成(Retrieval Augmented Generation &#…...
Aspose.PDF 限制绕过方案:Java 字节码技术实战分享(仅供学习)
Aspose.PDF 限制绕过方案:Java 字节码技术实战分享(仅供学习) 一、Aspose.PDF 简介二、说明(⚠️仅供学习与研究使用)三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置 五、字节码修改实现代码&#…...
