html頁面中css縮放圖片的方法

html頁面制作中，可以利用 CSS 中的 transform 屬性對圖片進行旋轉(zhuǎn)，縮放，移動或傾斜的操作。而今天我們只說說 transform 屬性對圖片進行等比例的縮放操作。

css transform 屬性的介紹

transform：該屬性向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換。它允許我們對元素進行旋轉(zhuǎn)、縮放、移動或傾斜的操作。

縮放使用值：

scaleY(n)：對高度進行縮n倍的縮放

scaleX(n)：對寬度進行縮放，n指的是縮放比例

scale(n)：對整體高度和寬度進行縮放，n為縮放的比例，為數(shù)字

示例代碼：

transform: scale(2)

css圖片寬度縮放

scaleX()：可以對元素(圖片)的寬度進行縮放，以下代碼是將原來的圖片的寬度放大了2倍。

示列代碼：

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

運行結(jié)果：

tml中img圖片進行等比例縮放的實例代碼

img圖片等比例縮放的方法

HTML中，要修改img元素定義的圖片的大小，且是等比例縮放，不改變寬和高的比值，那么可以采用只設(shè)置img元素屬性中width和height中的任何一個，不要同時設(shè)置兩個即可實現(xiàn)img圖片的等比例縮放效果。下面將通過兩個實例來分別實現(xiàn)這兩種方法。

width等比例縮放img圖片實例代碼，及在線編輯器

為了可以與原圖片的大小進行對照，下面的實例使用HTML的注釋符號將等比例縮放的代碼進行了注釋，第一遍運行完之后，可以將第一行的代碼刪除（在線刪除，因為這是一個在線編輯器），然后將第二行代碼中的注釋符號去除掉，接著再運行一遍看看等比例縮放的效果：

<img src='../../static/img/test.jpg'>
<!-- <img src='../../static/img/test.jpg' width="50%"> -->

height等比例縮放實例代碼

這邊的代碼與上面的幾乎一樣，只是將width的屬性修改成為height的屬性，如下：

<img src='../../static/img/test.jpg'>
<!-- <img src='../../static/img/test.jpg' height="50%"> -->

提示：如上面的兩個實例，將width和height分別設(shè)置為50%都可以等比例縮放圖片，但得到的圖片的大小不一定一樣。

等比例縮放的另外一種方法

當(dāng)然了，如果要通過同時設(shè)置img圖片的width和height兩個屬性來達到等比例縮放圖片的話也是可以的，但是要先計算一下圖片的寬度和高度的比例，之后再等比例縮放。

來源：笨鳥工具-璞玉天成，大器晚成

原文：html img圖片等比例縮放的代碼 | HTML教程

免責(zé)聲明：內(nèi)容僅供參考，不保證正確性

近做項目時，經(jīng)常遇到需要圖片緩慢放大的效果。我做的時候想到了幾種方法，所以來總結(jié)一下。

1、利用css改變圖片的寬高，做出視覺上的放大。

首先，將圖片寫入html頁面中，給定寬高。

箭頭所指向的就是我們需要變化的圖片。我們需要給定圖片父級盒子的寬高，如上圖。

Tips:

transition用于設(shè)置四個過渡屬性。

這四個屬性分別為：

這個屬性要設(shè)置在做動畫的元素上。就是“誰”做動畫，“誰”就需要設(shè)置過渡屬性。

設(shè)置圖片的寬高分別為100%，是為了讓圖片與父級盒子一樣大。這樣當(dāng)盒子變大時，圖片不會出現(xiàn)偏移的現(xiàn)象。

以上準(zhǔn)備工作完成后，我們就需要設(shè)置鼠標(biāo)移動后圖片父級盒子改變到的寬高。

這樣就可以實現(xiàn)鼠標(biāo)劃過圖片變大的效果了。

當(dāng)然，同樣也可以直接作用于圖片上，方法還是一樣的。

2、利用jQuery中的css()方法，改變圖片的大小。

同樣將圖片盒子給定寬高。

樣式與方法一相同。

然后我們利用css()方法來改變他的大小。

這樣就可以利用css()方法來改變他的寬高，從而做到圖片的放大效果。

3、利用jQuery中的animate()自定義動畫的方法，改變圖片的大小，實現(xiàn)放大的效果。

要利用這種方式，html與css跟之前是一樣的。

由于animate方法是自定義動畫方法，因此不需要過渡屬性來進行緩動。

此時，頁面上的圖片便會自動放大。

4、利用scale()方法，實現(xiàn)圖片放大的效果。

scale() 方法為畫布的當(dāng)前變換矩陣添加一個縮放變換。縮放通過獨立的水平和垂直縮放因子來完成。圖片的變化是以中心為基準(zhǔn)點來變化的。

這個方法同樣是通過樣式進行改變的。

結(jié)構(gòu)和樣式不需要進行調(diào)整。

只需要給圖片盒子加一個transform: scale(1.2);即可。數(shù)值表示放大/縮小的為原始的幾倍。（此時的過渡效果最好還是添加上，可以使圖片變化時感覺更加圓滑流暢）

5、利用css3的keyframe來創(chuàng)建動畫

Keyframe的定義和用法如下：

首先html結(jié)構(gòu)還是一樣，css則需要進行改變。我們需要設(shè)定的是動畫后的值。

比如：

接下來我們要設(shè)定動畫中css樣式。我將動畫分成了5個階段。每個階段改變他寬高的1/5，連貫下來就會出現(xiàn)動畫的效果。

之所以寫多個，是因為瀏覽器并不完全之前keyframe，因此需要使用每個瀏覽器所支持的不同的寫法。

這是w3c上標(biāo)明的對于瀏覽器的支持程度。

創(chuàng)建完動畫之后我們就可以直接引用了。只要使用animation就可以搞定了。

第一個值表示動畫的名稱，也就是我們所定義的動畫名稱。第二個值是完成動畫的時間。

給定完畢后，便能夠出現(xiàn)圖片放大的動畫效果了。

原文地址：http://www.gonet.com.cn/webduirshow-124.html

在線咨詢

上一篇：把HTML轉(zhuǎn)成PDF的4個方案及實現(xiàn)方法
下一篇：HTML 編輯器

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商