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

首先我们看看HTML中的图片是如何自适应屏幕的：

让图片自适应屏幕大小最简单的方法，保证管用，你把那个图片写在div里面的背景里，也就是background:url(…/img/1.jpg) center no-repeat;

这样就能够自适应屏幕大小了，而且不会出现横向的滚动条

首先是设置background:url(图片地址) 0 0 no-repeat scroll transparent;background-size:100% 100%;

> <div class="msg_desc">
> 
> <img style="max-width:100%;overflow:hidden;" src="https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg" alt="">
> 
> </div>

这里就把图片固定在msg_desc里面了，方便吧。

注：在html里面插入图片，如果想让图片自适应屏幕的小而不是宽高固定不变可以在css代码里加入：

> img{height: auto; width: auto\9; width:100%;}

width:auto;是宽度自动的意思。

“\9”是hack css 的一种写法，这种在正常css代码后面加"\9"的方式，只有IE浏览器才能识别，其他浏览器会忽略这条语句。这样就能做到差异化浏览器，来达到兼容浏览器的目的。

还有一种如何让网页图片宽度和高度自适应的方法：<