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

css——图片缩放，拉伸，变形的解决办法

news 2026/2/10 0:35:45

你的图片即将变得超级丝滑

  • 图片为什么会拉伸变形？
  • 怎么解决？
  • css的object-fit属性
    • object-fit属性有什么用
    • 介绍一下object-position
  • 举个小栗子

图片为什么会拉伸变形？

前端布局时，图片会出现拉伸、缩放和变形的原因可能有多种:
1.例如图片的尺寸与容器不匹配
2.设置了错误的样式属性
3.浏览器压缩

比如像这样：
在这里插入图片描述在这里插入图片描述

怎么解决？

通过调整图片的尺寸、使用样式属性或使用背景图等方式来解决。
如果图片拉伸、缩放或变形是由于浏览器压缩造成的，可以使用响应式图片或使用压缩技术来解决。
还有一些其他的解决方案，根据具体情况而定。
今天着重介绍css方法解决，那就是object-fit属性

css的object-fit属性

排列宽高不同，比例不同的图片，很容易破坏页面布局 。
如果此时给图片高度，图面会拉伸变形，巨丑。
这种情况下，我们可以使用object-fit属性
cover可以确保图片按原始宽高比例进行缩放，超出容器的部分会被裁剪掉
和object-fit配合的还有一个object-position属性 它可以指定图片显示的位置

object-fit属性有什么用

  1. 调整容器中的图片或视频大小，以适应容器的尺寸。
  2. 控制图片或视频的位置，以便让它们在容器中居中或者对齐到左上角、右上角、左下角或右下角等位置。
  3. 避免图片或视频在容器中变形或拉伸。
  4. object-fit适用于需要在固定尺寸的容器中展示图片或视频的场景。
    例如：网站的相册、产品展示页面、视频播放器等。
    使用object-fit非常简单，只需要在图片或视频的样式中添加object-fit属性，并设置其值为contain、cover、fill、none或scale-down即可。

介绍一下object-position

object-position 是一种 CSS 样式属性，用于设置对象（如图片或视频）在容器中的位置。
通过设置 object-position 属性，可以改变对象在容器中的位置，从而实现布局上的调整。
该属性的值可以是一个具体的像素值，也可以是相对于容器的百分比值。
例如：
设置 {object-position: 50% 50%} 可以将对象在容器中居中显示。
该属性通常与 object-fit 属性一起使用，用于控制对象在容器中的大小和位置。

举个小栗子

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>img{width: 300px;height: 300px;object-fit: cover;object-position: left top;transition: 1s;}img:hover{object-position: right bottom;}</style></head><body><img src="https://img.zcool.cn/community/015fe55e02d1dea8012165183c9fa1.jpg@1280w_1l_2o_100sh.jpg" alt=""><img src="https://img.zcool.cn/community/0115c759687127a8012193a3eaa999.png@1280w_1l_2o_100sh.png" alt=""><img src="https://bpic.588ku.com/back_our/20210808/bg/ca506bb9197dea874b41e5418610d949_76567.png" alt=""></body>
</html>

请添加图片描述

相关文章：

css——图片缩放，拉伸，变形的解决办法

你的图片即将变得超级丝滑图片为什么会拉伸变形&#xff1f;怎么解决&#xff1f;css的object-fit属性object-fit属性有什么用介绍一下object-position举个小栗子图片为什么会拉伸变形&#xff1f; 前端布局时&#xff0c;图片会出现拉伸、缩放和变形的原因可能有多种: 1.例如图…...

编程日记 2023/3/10 12:17:40

【工具使用】STM32CubeMX-基础使用篇

一、概述 无论是新手还是大佬&#xff0c;基于STM32单片机的开发&#xff0c;使用STM32CubeMX都是可以极大提升开发效率的&#xff0c;并且其界面化的开发&#xff0c;也大大降低了新手对STM32单片机的开发门槛。     本文主要面向初次接触STM32CubeMX的同学&#xff0c;大…...

编程日记 2023/3/10 12:16:39

面试题解-理解cookie、session和token

项目vuespringboot 1、token 用户填写密码账号发送至后端&#xff0c;由后端生成token&#xff0c;返回给前端&#xff0c;前端把它存放起来&#xff0c;如放在cookie或者localStorage里面 前端向服务器发起请求时在请求头携带token&#xff0c;判断用户身份给与反应。 //后…...

编程日记 2023/3/10 12:15:37

Buuctf [GUET-CTF2019]number_game 题解

目录 一.主函数逻辑 二.level_stor()函数 三.mid_stor函数 四.operate函数 五.judge2函数 六.求解flag 一.主函数逻辑 ①先输入一个字符串,然后judge1()函数遍历它,判断字符是否在[0,4]区间范围内 ②将输入的字符串用层次遍历的方式存储为一个二叉树root ③再将二叉树r…...

编程日记 2023/3/10 12:14:34

OsgEarth配置.earth文件支持wms服务

<!-- 参考 http://vmap0.tiles.osgeo.org/wms/vmap0?LAYERSbasic&SERVICEWMS&VERSION1.1.1&REQUESTGetMap&STYLES&FORMATimage%2Fjpeg&SRSEPSG%3A4326&BBOX-90,45,-45,90&WIDTH256&HEIGHT256 --> <!-- 可用 2023.03.09--> …...

编程日记 2023/3/10 12:13:32

【数据结构】详解空间复杂度

Yan英杰的博客 悟已往之不谏 知来者之可追 目录 空间复杂度 ​案例1:计算BubbleSort的空间复杂度&#xff1f; 案例2:计算斐波那契额数列的前N项的空间复杂度 案例3:计算阶乘递归Fac的空间复杂度&#xff1f; 案例4:F1和F2两函数是否使用的同一块空间 案例5:计算该…...

编程日记 2023/3/10 12:12:29

腾讯云GPU游戏服务器/云主机租用配置价格表

用于游戏业务的服务器和普通云服务器和主机空间是不同的&#xff0c;游戏服务器对于硬件的配置、网络带宽有更大的要求&#xff0c;一般游戏服务器根据不同的配置和适用场景会有十几元一小时到几十元一小时&#xff0c;而且可以根据不同的按量计费。而普通的云服务器可能需要几…...

编程日记 2023/3/10 12:11:25

配置临时SSL子域名泛化证书

配置临时SSL子域名泛化证书 三个月有效期第一步&#xff1a;访问SSL证书地址第二步&#xff1a;在华为云上/其他服务器上搜索DNS云解析服务类似的功能第三步&#xff1a;将SSL申请的信息添加到服务器的记录集中第四步&#xff1a;添加完信息进行保存获取key / crt第五步&#x…...

编程日记 2023/3/10 12:10:21

【Linux:环境变量的理解】

目录 1 Z(zombie)-僵尸进程 2 孤儿进程 3 环境变量 3.1 基本概念 3.2 测试HOME 3.3 和环境变量相关的命令 3.4 环境变量的组织方式 3.5 环境变量通常是具有全局属性的 在讲环境变量之前&#xff0c;我们先把上次遗留知识点给总结了&#xff08;僵尸进程和孤儿进程&…...

编程日记 2023/3/10 12:09:19

python数据类型与数据结构

目录 一、数据类型 1.1变量与常量 1.1.1变量 1.1.2常量 1.2字符串类型 1.3整数与浮点数 1.4List列表 1.5 元组tuple 1.6字典dict 二、字符串格式化 三、数据输入和类型转换 四、简单列表习题练习 一、数据类型 变量类型&#xff1a; 整数int&#xff08;4字节&#x…...

编程日记 2023/3/10 12:08:17

大数据自学学习技巧？

经常有人说&#xff1a;先别管大数据是什么&#xff0c;现在理解不了没关系&#xff0c;先开始学&#xff0c;等学着学着就明白了&#xff0c;这种学习路线基本是混合的&#xff0c;很难分清楚自己学了这段怎么用在以后项目中&#xff0c;所以会越学越迷茫&#xff0c;但是等你…...

编程日记 2023/3/10 12:07:12

Qt音视频开发22-音频播放QAudioOutput

一、前言 以前一直以为只有Qt5以后才有QAudioOutput播放音频&#xff0c;其实从Qt4.6开始就有&#xff0c;在Qt6中变成了QAudioSink&#xff0c;功能一样。用QAudioOutput播放音频pcm数据极其方便&#xff0c;只需要指定音频播放设备&#xff08;可能电脑上有多个音频输出设备…...

编程日记 2023/3/10 12:06:08

JavaEE简单示例——Spring的入门程序

简单介绍&#xff1a; 在之前我们简单的介绍了有关于Spring的基础知识&#xff0c;那么现在我们就来一步步的把理论融入到实践中&#xff0c;开始使用这个框架&#xff0c;使用过程也是非常的简单&#xff0c;大致可以分为几个基础的步骤&#xff1a; 1.首先引入Spring的Mave…...

编程日记 2023/3/10 12:03:02

【嵌入式Bluetooth应用开发笔记】第一篇：DBUS概述与蓝牙开发小试牛刀

DBUS概述 DBus&#xff08;D-Bus&#xff09;是一个在不同程序之间传递消息的系统总线。DBus为不同的程序之间提供了一种通信机制&#xff0c;这种通信制可以在不需要知道对方程序的情况下进行通信。 DBus可以使用多种编程语言来开发&#xff0c;包括C、C、Python、Java等。在…...

编程日记 2023/3/10 12:01:54

如何在电脑更换新硬盘后迁移window11系统？2种迁移方法分享！

随着时间的流逝&#xff0c;数据量也在逐渐增多&#xff0c;就会导致您的硬盘空间也变得越来越小&#xff0c;因此系统运行速度可能会受到一些影响而越来越慢。为了摆脱这种情况&#xff0c;您可以选择升级到更大的硬盘来使计算机获取更大的磁盘空间&#xff0c;或者迁移系统到…...

编程日记 2023/3/10 12:00:52

6、Elasticsearch优化

一、Elasticsearch集群配置 1、硬件选择 Elasticsearch的基础是 Lucene &#xff0c;所有的索引和文档数据是存储在本地的磁盘中&#xff0c; 具体的路径可在 ES 的配置文件 ../config/elasticsearch.yml 中配置&#xff0c;如下&#xff1a;磁盘在现代服务器上通常都是瓶颈。…...

编程日记 2023/3/10 11:59:47

给力｜这是一个专业的开源快速开发框架！

在低代码开发市场&#xff0c;专业的开源快速开发框架可以助力企业提升办公协作效率&#xff0c;实现提质增效的办公自动化的发展目标。 流辰信息低代码技术开发平台服务商&#xff0c;拥有丰富的技术经验和案例合作经验&#xff0c;针对不同的客户需求&#xff0c;提供个性化、…...

编程日记 2023/3/10 11:58:43

CIMCAI smart shipping company product container damage identify

世界港航人工智能领军者企业CIMCAI&#xff0c;领先智能航运船公司集装箱管理产品ceaspectusS™全球规模化应用落地智能化航运&#xff0c;全球前三船公司认可验箱标准应用。全球港航人工智能领军者企业CIMCAI&#xff0c;是全球第一家完成两百万次人工智能验箱&#xff0c;上亿…...

编程日记 2023/3/10 11:57:40

ego微商小程序项目-接口测试

文章目录 1.接口理论回顾1.1 接口测试相关概念1.2 接口测试流程2.接口测试文档2.1 接口测试文档基础2.2 ego微商小程序的接口文档解析3.设计接口测试用例3.1 接口测试用例基础3.2 ego微商小程序接口测试用例4. 执行测试用例4.1 ego小程序测试用例执行4.1.1 首页-轮播图4.1.2 用…...

编程日记 2023/3/10 11:56:35

excel文件已经损坏怎么办

1. excel文件突然损坏怎么办Excel修复不成功还可以尝试其他修复方式。1、Excel提示文件已损坏可能是受保护视图的问题。如果打开文件碰到此提示&#xff0c;可以先点确定。在按以下步骤操作&#xff1a;1&#xff09;在空白程序界面&#xff0c;点击功能栏的【文件】&#xff0…...

编程日记 2023/3/10 11:55:30

深入剖析AI大模型：大模型时代的 Prompt 工程全解析

今天聊的内容&#xff0c;我认为是AI开发里面非常重要的内容。它在AI开发里无处不在&#xff0c;当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"&#xff0c;或者让翻译模型 "将这段合同翻译成商务日语" 时&#xff0c;输入的这句话就是 Prompt。…...

编程新知 2026/2/8 20:42:53

Opencv中的addweighted函数

一.addweighted函数作用 addweighted&#xff08;&#xff09;是OpenCV库中用于图像处理的函数&#xff0c;主要功能是将两个输入图像&#xff08;尺寸和类型相同&#xff09;按照指定的权重进行加权叠加&#xff08;图像融合&#xff09;&#xff0c;并添加一个标量值&#x…...

编程新知 2026/2/1 1:50:03

最新SpringBoot+SpringCloud+Nacos微服务框架分享

文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的&#xff0c;根据Excel列的需求预估的工时直接打骨折&#xff0c;不要问我为什么&#xff0c;主要…...

编程新知 2026/2/1 23:39:12

江苏艾立泰跨国资源接力：废料变黄金的绿色供应链革命

在华东塑料包装行业面临限塑令深度调整的背景下&#xff0c;江苏艾立泰以一场跨国资源接力的创新实践&#xff0c;重新定义了绿色供应链的边界。 跨国回收网络&#xff1a;废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点&#xff0c;将海外废弃包装箱通过标准…...

编程新知 2026/1/31 13:42:15

Android15默认授权浮窗权限

我们经常有那种需求&#xff0c;客户需要定制的apk集成在ROM中&#xff0c;并且默认授予其【显示在其他应用的上层】权限&#xff0c;也就是我们常说的浮窗权限&#xff0c;那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...

编程新知 2026/2/1 4:13:59

Hive 存储格式深度解析：从 TextFile 到 ORC，如何选对数据存储方案？

在大数据处理领域&#xff0c;Hive 作为 Hadoop 生态中重要的数据仓库工具&#xff0c;其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式&#xff0c;很多开发者常常陷入选择困境。本文将从底…...

编程新知 2025/12/6 10:54:35

Python ROS2【机器人中间件框架】 简介

销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...

编程新知 2026/1/29 9:12:46

SQL慢可能是触发了ring buffer

简介 最近在进行 postgresql 性能排查的时候，发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升，且低水位伴随在整个慢 SQL，一直是 buferIO 的等待事件，此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ，但…...

编程新知 2025/10/2 9:17:52

人工智能--安全大模型训练计划：基于Fine-tuning + LLM Agent

安全大模型训练计划&#xff1a;基于Fine-tuning LLM Agent 1. 构建高质量安全数据集 目标&#xff1a;为安全大模型创建高质量、去偏、符合伦理的训练数据集&#xff0c;涵盖安全相关任务&#xff08;如有害内容检测、隐私保护、道德推理等&#xff09;。 1.1 数据收集 描…...

编程新知 2026/2/5 8:48:10

Matlab实现任意伪彩色图像可视化显示

Matlab实现任意伪彩色图像可视化显示 1、灰度原始图像2、RGB彩色原始图像 在科研研究中&#xff0c;如何展示好看的实验结果图像非常重要&#xff01;&#xff01;&#xff01; 1、灰度原始图像 灰度图像每个像素点只有一个数值&#xff0c;代表该点的​​亮度&#xff08;或…...

编程新知 2026/2/7 2:14:33