How do images in HTML adapt to the screen? This article has an introduction to the adaptive usage of images.

本篇文章主要的介绍了关于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浏览器才能识别，其他浏览器会忽略这条语句。这样就能做到差异化浏览器，来达到兼容浏览器的目的。

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

在我们设计网页的时候，经常会遇到图片自适应问题，实际这些工作完全可以交给浏览器来完成就可以了，只可惜，无论是IE还是FIREFOX在图片自适应这个问题上都处理的不尽人意，网上实现网页图片宽度和高度的方法也很多。

今天介绍的这种是使用CSS来完成，根据实际的应用效果来说，使用Javascript还是比较靠谱一点，因为CSS的expression的确有点烦，小编是指使用效果上有点恼人，仅供大家参考使用。

使用CSS实现图片的自适应

使用CSS实现图片自适应很简单，主要靠两个参数来完成，分别是max-width和max-height，这两个参数在FIREFOX和IE7以 上支持都很好，但是在IE6上面，效果非常糟糕，尤其是对于多张图片的显示，第一次显示网页大都很难达到图片自适应的效果，一般都是有些能自适应，有些不 能自适应，多次刷新可能又显示OK，就是这点就足够烦人，而且一旦显示多张图片，IE 6上就卡的要命（expression在IE上比较占用资源，感觉设计是用来玩得，FIREFOX自适应效果还是比较好，速度也非常快），反正笔者至今是 没有找到更好的CSS方法来让IE 6完美支持图片自适应。

示例代码如下：

img{
    max-width: 128px;
    max-height: 128px;
    height:auto;
    zoom:expression( function(e) {
if(e.width>e.height) {if (e.width>128) { e.height = e.height*(128 /e.width); e.width=128; }}
else {if (e.height>128) { e.width = e.width*(128 /e.height); e.height=128; }}
e.style.zoom = '1';     }(this));
         overflow:hidden; 
}

上面代码格式上需要特别注意两点：

• zoom属性里宽高赋值不能带单位（如px），否则无效；

• if和else语句也必须带大括号括起来，单句指令也不行（而在很多编程语言里，单句指令可以无需大括号）；

最后一个种放置背景图片的方法：

首先看你的背景图片大小，如果很大的话，一般情况下很多显示器都会显示的合适。

如果是想适应移动设备的，用一个CSS3属性

background-size:cover;

就可以了，可以将背景图根据窗口大小铺满整个浏览器窗口。

好了，以上就是这篇关于HTML中的图片自适应的三个常用的应用方法了，有问题的可以在下方提问。

【小编推荐】

HTML5 meter标签什么意思？meter标签的用法详解

html表单中textarea属性怎么固定大小？textarea属性实例介绍

The above is the detailed content of How do images in HTML adapt to the screen? This article has an introduction to the adaptive usage of images.. For more information, please follow other related articles on the PHP Chinese website!