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小时内与您取得联系。

整合营销服务商