知道吗？其实网页中有很多种图片格式，例如网页中有一种图片格式叫做 PNG，或者有一种图片叫 JPEG，还有另外一个名字叫 JPEG。

网页中其实还有很多其他种图片的格式，比如 GIF，GIF 一般是用来表示动图的，而 AVIF 或者 WebP 这些格式可能大部分同学并没有在网页中过多的去关注过，甚至还有一些 SVG 或者 BMP 的图片也有，这些可能不是大多数同学所经常去关注的图片格式。

今天会在网页代码中去实现自己通过引入一张图片来在网页中进行展示。图片是通过图片标签进行引入的，写一个图片标签，在 src 属性里面去写入当前图片的地址，当前图片地址可以用点斜杠表示。

当前去找到 test.jpg 的图片，找到之后就可以在浏览器中进行预览，通过浏览器进行打开就会发现图片已经展示在浏览器中了，但是这张图片实在是太大了。

可以通过改变代码标签中的"width"属性来修改图片大小，把它改成 100 宽，这个 100 宽就是指 100px 的意思，但是图片又变得太小了，怎么办？可以继续去修改它大小，把它变成 300。

修改完宽度之后发现图片是按比例进行伸缩的，也就是说即使不去修改它的 height 高度也能够放大和缩小，但是一旦手动控制了它的 height 就被压缩了，所以 height 可以不去设置。如果设置一定要提前知道这张图片的宽高比例，随意修改一个宽高都会导致图片进行的变形。

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

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

网页设计中，添加图片并为其添加超链接是常见的需求。通过使用HTML，我们可以轻松实现这些功能。下面将详细介绍如何实用地添加图片，并为图片添加超链接。

首先，我们需要了解HTML中如何添加图片。在HTML中，我们使用`<img>`标签来插入图片。`<img>`标签有几个重要的属性，包括`src`、`alt`和`width`、`height`等。`src`属性用于指定图片的URL地址，`alt`属性用于提供图片无法加载时的替代文本，而`width`和`height`属性则用于设置图片的宽度和高度。

下面是一个简单的示例，展示如何在HTML中添加图片：

<img src="这里写图片地址，要带http协议，比如：https://www.chaojilu.com" alt="看不到图片，就显示这个文字" width="500" height="300">

在这个示例中，我们使用了`<img>`标签，并通过`src`属性指定了图片的URL地址。同时，我们还设置了`alt`属性以提供替代文本，并通过`width`和`height`属性设置了图片的尺寸。

接下来，我们来看如何为图片添加超链接。在HTML中，我们使用`<a>`标签来创建超链接。`<a>`标签的`href`属性用于指定链接的目标地址。为了将图片包含在超链接中，我们可以将`<img>`标签放置在`<a>`标签内部。

下面是一个示例，展示如何为图片添加超链接：

<a href="https://www.chaojilu.com">
<img src="image.jpg" alt="看不到图片，就显示这个文字"width="这里写宽度" height="高度">>
</a>

在这个示例中，我们将`<img>`标签放置在`<a>`标签内部，并通过`href`属性指定了链接的目标地址。当用户点击图片时，将会跳转到指定的网址。同时，我们还通过`alt`属性为图片提供了替代文本，以便在图片无法加载时为用户提供提示。

除了基本的添加图片和超链接功能外，我们还可以通过一些技巧来优化图片的显示和加载效果。例如，我们可以使用CSS样式来设置图片的边框、圆角等外观属性，提升页面的美观度。同时，我们还可以通过压缩图片文件大小、使用懒加载等技术来优化图片的加载速度，提高用户体验。

需要注意的是，在添加图片和超链接时，我们需要确保所使用的图片资源是合法且可访问的。避免使用未经授权或侵权的图片资源，以免引发法律问题。同时，我们还应该关注图片的版权和使用协议，确保在使用图片时遵守相关规定。

总之，通过使用HTML的`<img>`和`<a>`标签，我们可以轻松地在网页中添加图片并为图片添加超链接。通过合理设置属性和优化技巧，我们可以提升图片的显示效果和加载速度，为用户提供更好的浏览体验。

各位鹿友有什么不懂可以在评论区留言，咱们一起探讨学习。