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小時內與您取得聯系。