html頁面制作中,可以利用 CSS 中的 transform 屬性對圖片進行旋轉,縮放,移動或傾斜的操作。而今天我們只說說 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>
運行結果:
tml中img圖片進行等比例縮放的實例代碼
HTML中,要修改img元素定義的圖片的大小,且是等比例縮放,不改變寬和高的比值,那么可以采用只設置img元素屬性中width和height中的任何一個,不要同時設置兩個即可實現img圖片的等比例縮放效果。下面將通過兩個實例來分別實現這兩種方法。
為了可以與原圖片的大小進行對照,下面的實例使用HTML的注釋符號將等比例縮放的代碼進行了注釋,第一遍運行完之后,可以將第一行的代碼刪除(在線刪除,因為這是一個在線編輯器),然后將第二行代碼中的注釋符號去除掉,接著再運行一遍看看等比例縮放的效果:
<img src='../../static/img/test.jpg'>
<!-- <img src='../../static/img/test.jpg' width="50%"> -->
這邊的代碼與上面的幾乎一樣,只是將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: 過渡
*請認真填寫需求信息,我們會在24小時內與您取得聯系。