html中img图片进行等比例缩放的实例代码

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教程

免责声明：内容仅供参考，不保证正确性

mg标签的应用场景

我们平时在浏览网站的过程中如果只有文字的话难免会有些太单调了，并且看文字多了眼睛也会比较难受，这时我们想要让我们的网页更漂亮更吸引人眼球，那么肯定少不了精美的图片来进行点缀，这就用到了今天我要教给大家的图像标签img。

img标签的组成

src：图片的路径这个是必须要有的

title：当我们把鼠标移动到图片上展示的文本内容

alt：当图片的路径错误或图片有问题时浏览器无法识别渲染的情况下展示的文本内容

width：设置图片的宽度

height：设置图片的高度

img标签的使用

源代码

<!DOCTYPE html>

<head>

</head>

<body>

<pre>

../:代表上一级目录

../../：上上级目录

当前目录中的文件夹下使用：文件夹名称/图片名称

上n级目录下的n级文件夹：n个../+n个文件夹的名称直到找到图片文件为止

</pre>

<img src="img/章泽天.png" title="这是同一目录中文件夹下的图片"><img src="../田馥甄.png" width="350"

height="300" title="这是上一级目录中的图片">

</body>

</html>

浏览器预览效果图

以上就是img图片标签的简单应用

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
</head>
<body>

<img src="../img/2.png" alt=""/>
<br><!-- 20% 是相对于父块的宽度 此处是body的宽度 -->
<!-- 20% 只是等比例缩放 我实测，以width的比例缩放，没有定义width比例 则再以height比例缩放--><img src="../img/2.png" width="20%" height="10%" border="1px" alt="photo"/>
<br>
<img src="../img/2.png" width="100px" height="200px" border="1px" alt="photo"/>

</body>
</html>

在线咨询

上一篇：HTML添加背景音乐(embed、audio)
下一篇：移动HTML5模拟触摸屏长按事件

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商