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

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

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

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

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

src  指向图片的引入路径

       绝对路径：完整的地址

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

<img src="../R-C.jpg">

注：

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

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

三、通过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；设置图片高度为自适应。

四、查看图片效果

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