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

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.lryc.cn/news/286094.html

相关文章:

  • 时间序列预测 — CNN-LSTM-Attention实现多变量负荷预测(Tensorflow):多变量滚动
  • angular-tree-component组件中实现特定节点自动展开
  • Linux系统下安装Vcpkg,并使用Vcpkg安装、编译OpenSceneGraph
  • 设计模式二(工厂模式)
  • Maven应用手册
  • 笨蛋学设计模式行为型模式-状态模式【20】
  • C++从零开始的打怪升级之路(day18)
  • 浅谈安科瑞直流电表在新加坡光伏系统中的应用
  • C++参悟:数值运算相关
  • 【Web前端开发基础】CSS的定位和装饰
  • [pytorch入门] 3. torchvision中的transforms
  • WINCC读写EXCEL-VBS
  • Python os模块
  • Elasticsearch:2023 年 Lucene 领域发生了什么?
  • Java算法 leetcode简单刷题记录4
  • opencv#27模板匹配
  • 【论文阅读笔记】Swin-Unet: Unet-like Pure Transformer for Medical Image Segmentation
  • IS-IS:01 ISIS基本配置
  • 基于极限学习机的曲线分类,基于极限学习机的光谱分类,基于极限学习机的分类预测
  • miniconda安装
  • PHP判断访客是否手机端(移动端浏览器)访问的方法总结
  • vscode无法自动补全
  • 深度学习记录--指数加权平均
  • 如何生成图源二维码?
  • PowerShell install 一键部署grafana
  • 笨蛋学设计模式行为型模式-解释器模式【23】
  • SAP ABAP SUBMIT常用用法
  • GitLab备份与恢复测试(基于Docker)
  • android studio开发的一些问题
  • 辞职对于我来说,不可避免(10)