CSS实现图片放大缩小的几种方法

参考

方法一:

常用使用img标签,制定width或者height的任意一个,图片会自动等比例缩小

<div><img src="https://avatar.csdn.net/8/5/D/1_u012941315.jpg"/>
</div>
<!-- CSS-->
<style>
img {width: 100px;//重置大小,最终图片大小确定
}
</style>

但是不知道为什么我在uniapp小程序中这样写并没有等比缩小

方法二:

使用CSS3新属性,transform的scale
大于1: 放大
小于1: 缩小

<style>img{transform:scale(2);//设置缩放比例-ms-transform:scale(2);-webkit-transform:scale(2);-o-transform:scale(2);-moz-transform:scale(2);}
</style>

方法三:

使用背景图设置图片
https://www.runoob.com/cssref/css3-pr-background.html

.logo {background-image:url("@/static/logo.png");background-repeat:no-repeat;background-size:28px;// img {// 	transform: scale(0.15);// }
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/630684.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

在Windows 10的PowerShell上实现对Linux机器,vscode同样可登录

在Windows 10的PowerShell上实现对Linux机器&#xff08;如 test192.168.10.13&#xff09;的SSH免密登录 1.检查SSH客户端&#xff1a;确保你的Windows 10系统已安装SSH客户端。 如果看到相关的命令说明&#xff0c;那么SSH客户端已安装。 在PowerShell中输入: ssh2.生成SSH…

Canvas和Three.js区别

Canvas&#xff1a; Canvas和Three.js都是用于在网页上创建和显示图形的工具&#xff0c;但它们的重点不同。Canvas是一个HTML5定义的标签&#xff0c;通过Canvas&#xff0c;你可以直接使用JavaScript来绘制线条、形状、文本和图像等。它有一套丰富的API&#xff0c;允许进行…

STM32F103标准外设库——中断应用/事件控制器(六)

个人名片&#xff1a; &#x1f981;作者简介&#xff1a;一名喜欢分享和记录学习的在校大学生 &#x1f42f;个人主页&#xff1a;妄北y &#x1f427;个人QQ&#xff1a;2061314755 &#x1f43b;个人邮箱&#xff1a;2061314755qq.com &#x1f989;个人WeChat&#xff1a;V…

2024年1月17日Arxiv热门NLP大模型论文:THE FAISS LIBRARY

Meta革新搜索技术&#xff01;提出Faiss库引领向量数据库性能飞跃 引言&#xff1a;向量数据库的兴起与发展 随着人工智能应用的迅速增长&#xff0c;需要存储和索引的嵌入向量&#xff08;embeddings&#xff09;数量也在急剧增加。嵌入向量是由神经网络生成的向量表示&…

代理服务器(Broker)的Master-Slave 架构

在消息队列系统中&#xff0c;代理服务器&#xff08;Broker&#xff09;的架构可以采用 Master-Slave 架构&#xff0c;但并不是所有消息队列系统都使用这种架构。不同的消息队列系统可能选择不同的架构方式&#xff0c;具体取决于系统的设计目标、性能需求以及容错机制。 在…

Java 方法中参数类型后写了三个点?什么意思?

1、...代表什么意思&#xff1f; 2、如何使用 3、注意事项 4、两个list&#xff0c;一个新的&#xff0c;一个旧的&#xff0c;旧列表中可能有新列表中存在的数据&#xff0c;也可能存在新列表中不存在的数据&#xff08;注&#xff1a;新旧列表中都不存在重复元素&#xff09;…

web开发学习笔记(6.element ui)

1.安装 2.在app.vue中引入ElementView中的内容 3.表格控件&#xff0c;当页大小发生变化&#xff0c;当当前页发生变化 4.对话框组件 5.将form表单中的数据打印出来 6.当遇到日期选择器得到的数据为昨日时&#xff0c;应该加入 value-format"yyyy-MM-dd"即可避免这个…

C++学习笔记——C++ 新标准(C++11、C++14、C++17)引入的重要特性

目录 1、简介 2.自动类型推导和初始化 示例代码 3.智能指针 示例代码 4.Lambda 表达式 示例代码 5.右值引用和移动语义 示例代码 6.并发编程支持 示例代码 7.其他特性 八、案例&#xff1a;实现一个简单的并发下载器 上一篇文章&#xff1a; C标准模板库&#xff…

若依框架学习

1、若依框架前后端分离版服务器部署&#xff0c;前端nginx的配置 2、RuoYi(若依)前后端分离版本&#xff0c;windows下部署&#xff08;nginx&#xff09; 3、若依&#xff1a;IDEA下&#xff08;若依前后端分离版Vue3&#xff09;添加新模块 4、 若依 Nginx部署相关问题一…

电子雨html代码

废话不多说下面是代码&#xff1a; <!DOCTYPE html><html lang"en"><head><meta charset"UTF-8"><title>Code</title><style>body{margin: 0;overflow: hidden;}</style></head><body><c…

mybatis分页、延迟加载、立即加载、一级缓存、二级缓存

mybatis分页、延迟加载、立即加载、一级缓存、二级缓存 分页延迟加载和立即加载缓存一级缓存二级缓存 分页 分类&#xff1a; 使用Limit&#xff0c;来进行分页&#xff1b;物理分页使用RowBounds集合来保存分页需要数据&#xff0c;来进行分页;逻辑分页&#xff1b;本质是全…

Linux/Networked

Enumeration nmap 网站更新之后有了一个引导模式&#xff0c;更利于学习了&#xff0c;之前看ippsec的视频&#xff0c;要不总是没有思路&#xff0c;现在出现的问题多了提示也更多了&#xff0c;还没有使用&#xff0c;一会用用再说 首先&#xff0c;第一个问题是“目标上正…

使用 Go 语言统计 0-200000 的数字中,哪些是素数?

题目 使用 Go 语言统计 0-200000的数字中&#xff0c;哪些是素数&#xff1f; 思路 两种方法&#xff1a; 单循环遍历 1-200000 数字&#xff0c;并判断是否是素数。 使用了 Goroutine 和通道实现并发&#xff1a; 通过创建两个通道 intChan 和 primeChan&#xff0c;以及一…

大数据毕业设计:基于python美食推荐系统+爬虫+Echarts可视化+协同过滤推荐算法+Django框架(源码)✅

毕业设计&#xff1a;2023-2024年计算机专业毕业设计选题汇总&#xff08;建议收藏&#xff09; 毕业设计&#xff1a;2023-2024年最新最全计算机专业毕设选题推荐汇总 &#x1f345;感兴趣的可以先收藏起来&#xff0c;点赞、关注不迷路&#xff0c;大家在毕设选题&#xff…

数据结构和算法的部分例题(力扣)

1.数组 1.1 合并一个数组的两个有序区间 public class MargTwo {public static void main(String[] args) {int[] arr1{1,5,6,2,4,10,11};int[] arr2new int[arr1.length];marg2(arr1,0,2,3,6,arr2);}private static void marg2(int[]arr1,int iStar,int iEnd,int jStar,int j…

嵌入式-Stm32-江科大基于标准库的GPIO4个小实验

文章目录 一 、硬件介绍二 、实验&#xff1a;LED闪烁、LED流水灯、蜂鸣器提示2.1 需求1&#xff1a;面包板上的LED以1s为周期进行闪烁。亮0.5s,灭0.5s.....2.2 需求2: 8个LED实现流水灯 三、硬件介绍-按键开关、光敏电阻四、 实验 按键控制LED、光敏传感器控制蜂鸣器4.1 需求1…

【MYSQL】存储引擎MyISAM和InnoDB

MYSQL 存储引擎 查看MySQL提供所有的存储引擎 mysql> show engines; mysql常用引擎包括&#xff1a;MYISAM、Innodb、Memory、MERGE 1、MYISAM&#xff1a;全表锁&#xff0c;拥有较高的执行速度&#xff0c;不支持事务&#xff0c;不支持外键&#xff0c;并发性能差&#x…

ubuntu18.04 安装mysql(命令)

1.安装MySQL #命令1 sudo apt-get update #命令2 sudo apt-get install mysql-server 2.配置MySQL sudo mysql_secure_installation 2.2 检查mysql服务状态 systemctl status mysql.service 3.配置远程访问 在Ubuntu下MySQL缺省是只允许本地访问的 3.1 首先用根用户进入…

深度学习记录--梯度检验

数值逼近 为了对梯度进行检验&#xff0c;需要计算近似误差值来接近梯度 对于单边误差和双边误差公式&#xff0c;其中双边误差与真实梯度相差更小&#xff0c;故一般采用双边误差公式 双边误差 公式&#xff1a; 梯度检验(gradient checking) 对于成本函数&#xff0c;求出…

2018年认证杯SPSSPRO杯数学建模A题(第一阶段)海豚与沙丁鱼全过程文档及程序

2018年认证杯SPSSPRO杯数学建模 探究海豚猎捕时沙丁鱼群的躲避运动模型 A题 海豚与沙丁鱼 原题再现&#xff1a; 沙丁鱼以聚成大群的方式来对抗海豚的捕食。由于水下光线很暗&#xff0c;所以在距离较远时&#xff0c;海豚只能使用回声定位方法来判断鱼群的整体位置&#xf…