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

css：怎么设置图片不变形

article 2026/5/3 17:01:03

问：

main元素中有一个img元素，这个img src=‘@/assets/images/tupian.png’css设置了img元素width：50% height:50%但是图片变形了，我应该怎么设置保持图片样式不变形

回答：

为了确保图片在调整大小时不变形，你可以使用CSS中的`object-fit`属性。`object-fit`属性定义了替换元素（如`<img>`）的内容应该如何适应其容器的框。常用的值包括`cover`和`contain`。- `cover`：保持图片的宽高比，并确保图片覆盖整个容器框。图片可能会被裁剪。
- `contain`：保持图片的宽高比，并确保图片完全显示在容器框中。容器框可能会有空白区域。以下是一个示例，展示了如何使用`object-fit`属性来保持图片不变形：<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>图片不变形示例</title><style>main {width: 100%;height: 100vh;display: flex;justify-content: center;align-items: center;}img {width: 50%;height: 50%;object-fit: cover; /* 或者使用 object-fit: contain; */}</style>
</head>
<body><main><img src="@/assets/images/tupian.png" alt="示例图片"></main>
</body>
</html>在这个示例中：
- `width: 50%;` 和 `height: 50%;` 设置图片的宽度和高度为容器的50%。
- `object-fit: cover;` 确保图片保持宽高比，并覆盖整个容器框。如果图片的宽高比与容器的宽高比不同，图片可能会被裁剪。
- 你也可以使用 `object-fit: contain;` 来确保图片完全显示在容器框中，但容器框可能会有空白区域。选择`cover`还是`contain`取决于你希望图片如何适应容器框。如果你希望图片完全显示，使用`contain`；如果你希望图片覆盖整个容器框，使用`cover`。

css：怎么设置图片不变形

问： main元素中有一个img元素，这个img src‘/assets/images/tupian.png’css设置了img元素width：50% height:50%但是图片变形了，我应该怎么设置保持图片样式不变形回答： 为了确保图片在调整大小时不变形&#xff0…...

编程日记 2026/2/15 14:50:01

软件测试就业

文章目录 2.6 初识一、软件测试理论二、软件的生产过程三、软件测试概述四、软件测试目的五、软件开发与软件测试的区别？六、学习内容 2.7 理解一、软件测试的定义二、软件测试的生命周期三、软件测试的原则四、软件测试分类五、软件的开发与测试模型1.软件开发模型…...

编程日记 2026/4/28 0:05:07

【Pandas】pandas Series sum

Pandas2.2 Series Computations descriptive stats 方法描述Series.abs()用于计算 Series 中每个元素的绝对值Series.all()用于检查 Series 中的所有元素是否都为 True 或非零值（对于数值型数据）Series.any()用于检查 Series 中是否至少有一个元素为 T…...

编程日记 2026/1/2 14:21:13

后缀表达式（蓝桥杯19I）

有减于号时假设有n个大于0从大到小的数，加减符号数为n-1：a,b,c,d,。。。。。，e sum求最大：(max )-(min ) a - (e - ( ) -（）)( ( )( ) ( ) 。。。。 ) 当序列中有负数时： a -&am…...

编程日记 2026/4/30 17:32:41

问题大集04-浏览器阻止从本地发起的跨域请求，因为服务器的响应头 Access-Control-Allow-Origin 设置为通配符 *

1、问题 localhost/:1 Access to XMLHttpRequest at xxx（请求） from origin http://localhost:xxx（本地） has been blocked by CORS policy: The value of the Access-Control-Allow-Origin header in the response must not be t…...

编程日记 2025/6/17 3:28:18

mac环境下，ollama+deepseek+cherry studio+chatbox本地部署

春节期间，deepseek迅速火爆全网，然后回来上班，我就浅浅的学习一下，然后这里总结一下，我学习中，总结的一些知识点吧，分享给大家。具体的深度安装部署，这里不做赘述，因为网…...

编程日记 2026/4/25 3:49:09

TypeScript 中的联合类型：灵活的类型系统

🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》 🍚 蓝桥云课签约作者、上架课程《Vue.js 和 E…...

编程日记 2026/4/24 9:12:31

DeepSeek-R1 32B Windows+docker本地部署

最近国产大模型DeepSeek兴起，本地部署了一套deepseek同时集成Open WebUI界面,给大家出一期教程。软件：Ollama、docker、Open WebUI 一、用Ollama下载模型首先我们需要安装Ollama，它可以在本地运行和管理大模型。到Ollama官网 https://ol…...

编程日记 2026/4/28 23:13:20

MySQL部署基于二进制日志文件位置的主从复制集群

MySQL主从复制介绍 MySQL 主从复制（Master-Slave Replication） 作为一种经典的数据库复制方案，被广泛应用于企业生产环境，尤其是在提升数据库性能、实现数据备份和分布式扩展方面具有重要作用。官方文档：https://de…...

编程日记 2026/4/20 4:28:41

AIOS: 一个大模型驱动的Multi-Agent操作系统设计与Code分析

AIOS: 一个大模型驱动的Multi-Agent操作系统设计与Code分析随着人工智能技术的快速发展，传统操作系统逐渐暴露出难以适应AI时代多样化需求的局限性。特别是在支持多个智能体协同工作方面存在显著不足。为此，我们提出了一种名为AIOS（Artifici…...

编程日记 2026/2/18 13:30:39

C++Primer学习（2.2）

2.2 变量变量提供一个具名的、可供程序操作的存储空间。C中的每个变量都有其数据类型,数据类型决定着变量所占内存空间的大小和布局方式、该空间能存储的值的范围，以及变量能参与的运算。对C程序员来说,“变量(variable)”和“对象(object)”一般可以互换使用。术…...

编程日记 2026/4/22 6:17:50

Mac 基于Ollama 本地部署DeepSeek离线模型

最近节日期间最火的除了《哪吒》就是deepseek了，毕竟又让西方各个层面都瑟瑟发抖的产品。DeepSeek凭借其强大的AI能力真的是在全球多个领域展现出强大的影响力。由于受到外部势力的恶意攻击倒是deepseek官方服务不稳定，国内其他厂家的适配版本也不是很稳…...

编程日记 2026/4/19 15:47:17

google

GAID：广告id，即Google Advertising ID（GAID），是由Google Play service提供给用户的可以重置的唯一广告id，通常也被用来作为设备的唯一标识，用于数据收集。但用户手机上必须安装有google play服务…...

编程日记 2026/3/6 17:52:54

基于kamailio开发VoIP管理系统的方案【CHATGPT提供】

好的，以下是更新后的最终方案，加入了按秒计费功能，并汇总了各个功能模块的详细描述： 最终方案：VoIP管理系统功能模块功能模块功能描述应用场景SIP 注册服务器处理用户注册请求，维护用户的位置信息&#…...

编程日记 2026/3/25 8:41:50

机器学习数学基础：14.矩阵的公式

1. 操作顺序可交换对于矩阵 A A A，若存在两种运算 ? ? ?和 ? ? ?，使得 ( A ? ) ? ( A ? ) ? (A^{?})^{?}\ (A^{?})^{?} (A?)? (A?)?，这意味着这两种运算的顺序可以交换。由此我们得到以下三个重要等式： ( A …...

编程日记 2025/7/6 10:16:50

DeepSeek-V2 论文解读：混合专家架构的新突破

论文链接：DeepSeek-V2: A Strong, Economical, and Efficient Mixture-of-Experts Language Model 目录一、引言二、模型架构（一）多头部潜在注意力（MLA）：重塑推理效率（二）DeepSeekM…...

编程日记 2026/4/20 7:12:22

C语言的灵魂——指针(3)

前言：上期我们介绍了const修饰指针，saaert断言都是针对指针本身的，文章后面我们用指针与数组建立了联系，这种联系或者是关系就是这篇文章所要介绍的。上一篇文章的传送门：指针2 指针3 一，数组名的含义及理解…...

编程日记 2026/4/19 19:08:54

机器学习之Transformer 模型

Transformer 模型详解 Transformer 是由 Vaswani et al. 在 2017 年提出的模型，最初用于机器翻译任务，并迅速成为自然语言处理（NLP）领域的标准模型架构。与传统的 RNN（循环神经网络）和 LSTM（长短期记忆网络）不同，Transformer 的核心思想是完全基于自注意力机制…...

编程日记 2025/10/27 14:38:12

SSD1306 128*32屏幕驱动

最近在做一个小项目，使用合宙air001做主控，arduino开发环境，项目设计一个小屏作为显示，本身使用u8g2库，奈何这个air001空间太小，没写多少就把程序储存空间占满了，log也没办法打印，对…...

编程日记 2026/4/28 15:36:58

【GitHub】GitHub 2FA 双因素认证 ( 使用 Microsoft Authenticator 应用进行二次验证 )

文章目录一、GitHub 的 2FA 双因素认证二、使用 Microsoft Authenticator 应用进行二次验证1、TOTP 应用2、下载 Microsoft Authenticator 应用3、安装使用 Authenticator 应用三、恢复码重要性一、GitHub 的 2FA 双因素认证现在登录 GitHub 需要进行二次身份验证 ; 先登录…...

编程日记 2026/5/2 5:54:43

CNN-day5-经典神经网络LeNets5

经典神经网络-LeNets5 1998年Yann LeCun等提出的第一个用于手写数字识别问题并产生实际商业（邮政行业）价值的卷积神经网络参考：论文笔记：Gradient-Based Learning Applied to Document Recognition-CSDN博客 1 网络模型结构 …...

编程日记 2025/5/28 0:33:02

AI绘画社区：解锁艺术共创的无限可能（9/10）

AI 绘画：不只是技术，更是社交新潮流在科技飞速发展的今天，AI 绘画早已不再仅仅是一项孤立的技术，它正以惊人的速度融入我们的社交生活，成为艺术爱好者们交流互动的全新方式，构建起一个充满活力与创意的社…...

编程日记 2026/5/2 8:13:21

一种基于Leaflet.Legend的图例动态更新方法

目录前言一、场景再现 1、需求描述 2、核心方法介绍 3、存在的问题二、问题解决 1、重复解决办法 2、图例不展示解决办法 3、成果展示三、总结前言在当今数字化时代，地理信息系统（GIS）技术已经广泛应用于各个领域，…...

编程日记 2026/4/24 15:13:21

Three.js实现一个动态的 3D 点阵波浪效果

使用 Three.js 创建了一个动态的 3D 点阵波浪效果，可用作页面背景。它通过粒子系统生成点阵，并根据鼠标移动和时间动态调整点的位置和大小，形成波浪效果。用户可以通过组件的 props 控制波浪的长度、颜色和位置。 <template><div i…...

编程日记 2026/3/14 18:30:40

【韩顺平linux】部分上课笔记整理

整理一下一些韩顺平老师上课时候的笔记课程：【小白入门通俗易懂】韩顺平一周学会Linux linux环境：使用阿里云服务器笔记参考 ： [学习笔记]2021韩顺平一周学会Linux 一、自定义函数基本语法应用实例： 计算两个参数的和…...

编程日记 2026/4/28 6:57:14

CPP集群聊天服务器开发实践（一）：用户注册与登录

目录 1 客户端用户注册与登录 1.1 主要思想 1.2 网络层 1.3 业务层 1.4 数据层 1.5 测试结果 1 客户端用户注册与登录 1.1 主要思想实现网络层、业务层、数据层的解耦，提高系统的可维护性。网络层：主要实现对客户端连接、客户端读写请求的捕获…...

编程日记 2026/4/24 0:42:44

C++ Attribute 属性说明符

目录属性说明符 Attribute编译警告相关[[deprecated]][[maybe_unused]][[fallthrough]][[nodiscard]] 可能触发编译优化[[noreturn]][[likely]]、[[unlikely]][[assume]][[carries_dependency]][[no_unique_address]] 属性说明符 Attribute 属性说明符Attribute自C11起&#…...

编程日记 2026/2/23 20:01:40

Elasticsearch去分析目标服务器的日志，需要在目标服务器上面安装Elasticsearch 软件吗

Elasticsearch 本身并不直接收集目标服务器的日志，它主要用于存储、搜索和分析数据。要收集目标服务器的日志，通常会借助其他工具，并且一般不需要在目标服务器上安装 Elasticsearch 软件，常见的日志收集方案： Filebeat…...

编程日记 2026/1/5 22:27:45

学JDBC 第二日

数据库连接池作用使数据库连接达到重用的效果，较少的消耗资源原理在创建连接池对象时，创建好指定个数的连接对象之后直接获取连接对象使用即可，不用每次都创建连接对象从数据库连接池中获取的对象的close方法真的关闭连接对象了吗…...

编程日记 2026/5/3 11:54:33

Android双屏异显Presentation接口使用说明

在点餐、收银、KTV等场景，对于双屏异显的需求是非常多的，首先可以节省硬件成本。而现在的智能板卡很多运行Android系统，从Android4.2开始支持WiFi Display（Miracast）功能后，就开始支持双屏异显Presentation这套应用层接口了，下面以Android5.1系统来说明这套接口的使用要…...

编程日记 2026/1/24 14:54:57

相关文章：