HTML中的图片如何自适应屏幕？这篇文章有图片的自适应用法介绍

我们在使用 HTML 插入图片时，要使插入的图片铺满 HTML 元素，可以使用 CSS 样式来实现。以下是一种操作方法。

一、先创建一个 text.html 文件

二、在文件中添加你所需要的图片

使用 img 标签来向网页中引入一个外部图片，

src  指向图片的引入路径

       绝对路径：完整的地址

       相对路径：不完整的地址，./ 或者../

注：

./   你（超链接）所在位置跟你要跳转的位置在同一目录下，默认就是./ 开始

../  你所在的位置跟你要跳转的位置不在同一目录下，跳出当前目录来到上一级目录寻找, 如果上一级目录下还未寻找到，那就再../，直到找到为止。

三、通过 css 实现图片自适应效果

在 html 文件外新建一个.css 文件，在 css 文件内，通过选择器选中对应的内容 在 {} 内书写样式

通过 link 标签，将 css 文件和 html 文件联系在一起

在 css 中添加代码

运行代码如下：

img{
    top: 0;
    left: 0;
    width: 100%;
    height: auto; 
}

top：0；设置图片顶部边距为 0。left：0；设置图片左侧边距为 0。width：100%；设置图片宽度为 100%。height：auto；设置图片高度为自适应。

四、查看图片效果

至此不论网页框大小如何，图片都可以自适应填充。