原创投稿
  1. 爱玩数码首页
  2. 投稿

html图片大小怎么设置css（html页面中css缩放图片的方法）

爱玩数码编辑 • • 投稿 • 阅读 49

在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 > <img src=”biao.png” > <br/> <!–宽度缩放–> <img src=”biao.png” > </div>

运行结果：

html图片大小怎么设置css（html页面中css缩放图片的方法）

css图片高度缩放

scaleY()：可以对元素的高度进行缩放，以下示例把原图片的高放大了2倍

示例代码：

<div > <img src=”biao.png” > <!–对高度进行缩放操作–> <img src=”biao.png” > </div>

运行结果：

html图片大小怎么设置css（html页面中css缩放图片的方法）

css图片等比例缩放

scale(n)：可以对元素的整体进行缩放，可以填入 X Y值，也可以填写一个值

示例代码：

<img src=”biao.png” > <br/><br /> <!–对全局进行缩放操作–> <img src=”biao.png” >

运行结果：

html图片大小怎么设置css（html页面中css缩放图片的方法）

案例：鼠标划过，图片等比例缩放

示例代码：

<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 > <img src=”https://www.feiniaomy.com/zb_users/upload/2019/08/201908301567161510836571.jpg” > </div> </body> </html>

运行结果：

html图片大小怎么设置css（html页面中css缩放图片的方法）

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，请发送邮件至87172970@qq.com举报，一经查实，本站将立刻删除。

赞 (0)
爱玩数码编辑爱玩数码编辑管理员
0 0
« 上一篇 2023年5月19日 15:03:12
下一篇 » 2023年5月19日 15:09:05

相关推荐

发表评论

登录后才能评论