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

css transform 屬性的介紹

transform:該屬性向元素應用 2D 或 3D 轉換。它允許我們對元素進行旋轉、縮放、移動或傾斜的操作。

縮放使用值:

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

国产视频appscaleX(n):對寬度進行縮放,n指的是縮放比例

国产视频appscale(n):對整體高度和寬度進行縮放,n為縮放的比例,為數字

示例代碼:

transform: scale(2)

css圖片寬度縮放

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

示列代碼:

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

運行結果:

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

css圖片高度縮放

国产视频appscaleY():可以對元素的高度進行縮放,以下示例把原圖片的高放大了2倍

示例代碼:

<img src="biao.png" style="margin: 5px;" >
<!--對高度進行縮放操作-->
<img src="biao.png" style="transform:scaleY(2);">

運行結果:

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

css圖片等比例縮放

国产视频appscale(n):可以對元素的整體進行縮放,可以填入 X Y值,也可以填寫一個值

示例代碼:

<img src="biao.png" style="margin: 5px;" >
<br/><br />
<!--對全局進行縮放操作-->
<img src="biao.png" style="transform:scale(2,2);margin-left: 30px;">

運行結果:

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

案例:鼠標劃過,圖片等比例縮放

示例代碼:

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    .divimg{
        width: 270px;
        height: 180px;
        overflow: hidden;
    }
    .divimg:hover img{
        -moz-transform:scale(1.1);
        -webkit-transform:scale(1.1);
        -o-transform:scale(1.1);
        transform:scale(1.1);
    }
</style>
<body>
    <div class="divimg">
        <img src="http://xswdd.cn/zb_users/upload/2019/08/201908301567161510836571.jpg" >
    </div>
</body>
</html>

運行結果:

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