html页面中css缩放图片的方法

html页面制作中，可以利用 CSS 中的 transform 属性对图片进行旋转，缩放，移动或倾斜的操作。而今天我们只说说 transform 属性对图片进行等比例的缩放操作。

css transform 属性的介绍

transform：该属性向元素应用 2D 或 3D 转换。它允许我们对元素进行旋转、缩放、移动或倾斜的操作。

缩放使用值：

scaleY(n)：对高度进行缩n倍的缩放

scaleX(n)：对宽度进行缩放，n指的是缩放比例

scale(n)：对整体高度和宽度进行缩放，n为缩放的比例，为数字

示例代码：

transform: scale(2)

scaleX()：可以对元素(图片)的宽度进行缩放，以下代码是将原来的图片的宽度放大了2倍。

示列代码：

<div class="divimg">
 <img src="biao.png" >
 <br/>
 <!--宽度缩放-->
 <img src="biao.png" style="transform:scaleX(2);">
</div>

运行结果：

知道吗？其实网页中有很多种图片格式，例如网页中有一种图片格式叫做 PNG，或者有一种图片叫 JPEG，还有另外一个名字叫 JPEG。

网页中其实还有很多其他种图片的格式，比如 GIF，GIF 一般是用来表示动图的，而 AVIF 或者 WebP 这些格式可能大部分同学并没有在网页中过多的去关注过，甚至还有一些 SVG 或者 BMP 的图片也有，这些可能不是大多数同学所经常去关注的图片格式。

今天会在网页代码中去实现自己通过引入一张图片来在网页中进行展示。图片是通过图片标签进行引入的，写一个图片标签，在 src 属性里面去写入当前图片的地址，当前图片地址可以用点斜杠表示。

当前去找到 test.jpg 的图片，找到之后就可以在浏览器中进行预览，通过浏览器进行打开就会发现图片已经展示在浏览器中了，但是这张图片实在是太大了。

可以通过改变代码标签中的"width"属性来修改图片大小，把它改成 100 宽，这个 100 宽就是指 100px 的意思，但是图片又变得太小了，怎么办？可以继续去修改它大小，把它变成 300。

修改完宽度之后发现图片是按比例进行伸缩的，也就是说即使不去修改它的 height 高度也能够放大和缩小，但是一旦手动控制了它的 height 就被压缩了，所以 height 可以不去设置。如果设置一定要提前知道这张图片的宽高比例，随意修改一个宽高都会导致图片进行的变形。

天介绍一个根据html生成图片的工具html2canvas，主要原理是使用canvas绘制html，再使用canvas生成图片。

工具官网

1. 安装

npm install html2canvas --save

2. 引用

import html2canvas from 'html2canvas'

3. 使用

如：生成id为result_page容器内dom的图片；

html2canvas(document.querySelector("#result_page"), {scale:1,logging:false}).then(canvas => {
 self.resultImgSrc = canvas.toDataURL("image/png");
})

注：scale：控制着放大比例，值越大越耗性能，生成的图片越清晰，如果视口宽度为750px，设置为1即可；

*请认真填写需求信息，我们会在24小时内与您取得联系。