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

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>

運行結果：

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

img圖片等比例縮放的方法

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

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分別設置為50%都可以等比例縮放圖片，但得到的圖片的大小不一定一樣。

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

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

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

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

免責聲明：內容僅供參考，不保證正確性

用Firebug動態的查看元素的變化(HTML與CSS)

.blogs figure img { width: 100%; margin: auto; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }
.blogs figure:hover img { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); }

CSS3標簽中的transform：scale(圖片縮放比例), 1代表原圖顯示, 1.1縮放1.1倍…

transform: 變形

scale: 縮放

tranistion: 過渡

在線咨詢

上一篇：HTML5代碼做的中國象棋游戲，這個程序無人能敵
下一篇：使用Python構建Markdown到HTML的轉換管道

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商