html页面中css缩放图片的方法 html 页面缩放
qiyuwang 2024-10-18 10:29 12 浏览 0 评论
在html页面制作中，可以利用 CSS 中的 transform 属性对图片进行旋转，缩放，移动或倾斜的操作。而今天我们只说说 transform 属性对图片进行等比例的缩放操作。
css transform 属性的介绍
transform：该属性向元素应用 2D 或 3D 转换。它允许我们对元素进行旋转、缩放、移动或倾斜的操作。
缩放使用值：
scaleY(n)：对高度进行缩n倍的缩放
scaleX(n)：对宽度进行缩放，n指的是缩放比例
scale(n)：对整体高度和宽度进行缩放，n为缩放的比例，为数字
示例代码：
transform: scale(2)
css图片宽度缩放
scaleX()：可以对元素(图片)的宽度进行缩放，以下代码是将原来的图片的宽度放大了2倍。
示列代码：
<div class="divimg"> <img src="biao.png" > <br/> <!--宽度缩放--> <img src="biao.png" style="transform:scaleX(2);"> </div>
运行结果：
css图片高度缩放
scaleY()：可以对元素的高度进行缩放，以下示例把原图片的高放大了2倍
示例代码：
<div class="divimg"> <img src="biao.png" style="margin: 5px;" > <!--对高度进行缩放操作--> <img src="biao.png" style="transform:scaleY(2);"> </div>
运行结果：
css图片等比例缩放
scale(n)：可以对元素的整体进行缩放，可以填入 X Y值，也可以填写一个值
示例代码：
<img src="biao.png" style="margin: 5px;" > <br/><br /> <!--对全局进行缩放操作--> <img src="biao.png" style="transform:scale(2,2);margin-left: 30px;">
运行结果：
案例：鼠标划过，图片等比例缩放
示例代码：
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
.divimg{
width: 270px;
height: 180px;
overflow: hidden;
}
.divimg:hover img{
-moz-transform:scale(1.1);
-webkit-transform:scale(1.1);
-o-transform:scale(1.1);
transform:scale(1.1);
}
</style>
<body>
<div class="divimg">
<img src="https://www.feiniaomy.com/zb_users/upload/2019/08/201908301567161510836571.jpg" >
</div>
</body>
</html>
运行结果：
相关推荐
- 10款最出色的免费数据库管理工具（免费数据库客户端）
-
OpenKeyValOpenKeyval是一款免费、开源的键值数据库管理工具，基于Web，并且基于PHP开发，其目标是用最简单的方法来管理Web应用程序数据。用户只需要发送一个POST请求就可以存储...
- 主流数据库的不同点在哪?MySQL和SQL Server的区别介绍
-
在本教程中，树懒君介绍了两种最普遍应用的RDBMS—MySQL和MicrosoftSQLServer。通过介绍MySQL和SQLServer的几个关键区别，希望大家能在这两者之间做出最适合自己的...
- 【推荐】一个开源免费、AI 驱动的智能数据管理系统，支持多数据库
-
如果您对源码&技术感兴趣，请点赞+收藏+转发+关注，大家的支持是我分享最大的动力！！！.前言...
- MySQL原理介绍（mysql原理简述）
-
一、Mysql中有哪几种锁？1）表级锁开销小，加锁快；不会出现死锁；锁定粒度大，发生锁冲突的概率最高，并发度最低。...
- 免费的sql工具，SQLynx有哪些优势?
-
1.免费且功能全面无成本负担：对于个人用户来说，SQLynx个人版完全免费，无需支付任何使用费用或订阅费用，降低了个人开发者的经济成本。...
- 免费mysql服务器，mySQL云数据库产品优势?
-
mysql免费服务器，免费mysql服务器。云数据库MySQL（TencentDBforMySQL）是一种稳定可靠、可弹性扩展和便于管理的关系型数据库服务。云数据库MySQL提供备份恢复、监...
- 结合我们公司的需求，看了ORACLE的收费，决定弃购!
-
今天向ORACLE的销售人员，确认了他们的报价，每套ORACLE按CPU付费，一个CPU报价约26万，如果你一台服务器有4个CPU，则26*4=104万（一台服务器）。我们有10台服务器，经费不够的情...
- 一起免费考 MySQL OCP 认证啦（mysql ocp考试大纲）
-
前言：在1995年，首个MySQL版本发布，为庆祝MySQL诞辰30周年，OracleUniversity在限定期间内推出了多个MySQL的免费培训课程与认证，其中也包括My...
- Navicat推出免费数据库管理软件Premium Lite
-
IT之家6月26日消息，Navicat推出一款免费的数据库管理开发工具——NavicatPremiumLite，针对入门级用户，支持基础的数据库管理和协同合作功能。▲Navicat...
- Linux服务器配置DNS解析（linux dns配置服务器）
-
环境说明CentOS等Linux操作系统基本是一样的...
- 搭建内网的DNS服务器（搭建内网dns解析服务器）
-
1.安装dnsmasq#centosyum-yinstalldnsmasq...
- # 更换手机热点后secureCRT无法连接centOS7系统
-
#更换手机热点后secureCRT无法连接centOS7系统##一、问题描述某些情况下，我们可能使用手机共享热点而给电脑联网。本来用一个手机热点共享网络时，SecureCRT可以正常连接到Cent...
- VMware与CentOS安装配置指南（vmware workstation安装centos7）
-
以下是一份详细的VMware虚拟机安装、配置及CentOS系统安装配置的指南，适合新手逐步操作：一、VMware虚拟机安装与配置...
- CentOS7安全加固的一份整理规划建议
-
◆更新系统：及时更新CentOS7操作系统版本和安全补丁，确保系统以最新状态运行。◆关闭不必要的服务：在运行系统时，应关闭不需要的服务和端口，以减少系统暴露的攻击面。◆安装防火墙：使用iptables...
- DNS从入门到放弃系列(3)（dns f1）
-
见字如面，我是小斐，今天文章展开说明bind9中named.conf...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- navicat无法连接mysql服务器 (65)
- 下横线怎么打 (71)
- flash插件怎么安装 (60)
- lol体验服怎么进 (66)
- ae插件怎么安装 (62)
- yum卸载 (75)
- .key文件 (63)
- cad一打开就致命错误是怎么回事 (61)
- rpm文件怎么安装 (66)
- linux取消挂载 (81)
- ie代理配置错误 (61)
- ajax error (67)
- centos7 重启网络 (67)
- centos6下载 (58)
- mysql 外网访问权限 (69)
- centos查看内核版本 (61)
- ps错误16 (66)
- nodejs读取json文件 (64)
- centos7 1810 (59)
- 加载com加载项时运行错误 (67)
- php打乱数组顺序 (68)
- cad安装失败怎么解决 (58)
- 因文件头错误而不能打开怎么解决 (68)
- js判断字符串为空 (62)
- centos查看端口 (64)