• 首页
  • 攻略

    • [如何设置html页面大小]html设置整个页面大小!

    2023-02-27 06:24 32次浏览 攻略

    在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>

    运行结果：

    css图片高度缩放

    scaleY()：可以对元素的高度进行缩放，以下示例把原图片的高放大了2倍

    示例代码：

    <div class="divimg">
    <img src="biao.png" style="margin: 5px;" >
    <!–对高度进行缩放操作–>
    <img src="biao.png" style="transform:scaleY(2);">
    </div>

    运行结果：

    css图片等比例缩放

    scale(n)：可以对元素的整体进行缩放，可以填入 X Y值，也可以填写一个值

    示例代码：

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

    运行结果：

    案例：鼠标划过，图片等比例缩放

    示例代码：

    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    </head>
    <style>
    .divimg{
    width: 270px;
    height: 180px;
    overflow: hidden;
    }
    .divimg:hover img{
    -moz-transform:scale);
    -webkit-transform:scale);
    -o-transform:scale);
    transform:scale);
    }
    </style>
    <body>
    <div class="divimg">
    <img src="; >
    </div>
    </body>
    </html>

    运行结果：

    1.文章《[如何设置html页面大小]html设置整个页面大小!》援引自互联网，为网友投稿收集整理，仅供学习和研究使用，内容仅代表作者本人观点，与本网站无关，侵删请点击页脚联系方式。

    2.文章《[如何设置html页面大小]html设置整个页面大小!》仅供读者参考，本网站未对该内容进行证实，对其原创性、真实性、完整性、及时性不作任何保证。

    相关推荐

    ↑