<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<head><meta forua="true" http-equiv="Cache-Control" content="max-age=0" /></head>
<card title="html5设置图片自适应屏幕宽度" id="card1">
<p> 游客</p><p>
标题:html5设置图片自适应屏幕宽度<br/>
正文:<br/>
            在文件夹中创建css文件夹里面是css文件、hello图片、test的html文件。                            2        打开test的html文件，在里面添加class为scale的div，里面放一张hello图片。                            3        在浏览器中打开发现会一直保持大小，并不会缩放。                            4        打开css文件夹中的hello的css文件，在里面设置.scale img的属性background-size与width。    .scale img{    background-size:contain|cover;    width:100%;    height: auto;    }                            5        在test的html文件中引入hello样式css文件。                            6        再次在浏览中打开test的html文件，我们发现图片会随着窗口改变宽度自动缩放，在移动设备中测试也是一样的效果。                    <br/><a href="http://www.xmhjfb.com/wap.asp?mode=WAP&amp;act=View&amp;id=117&amp;Page=1">[&lt;&lt;]</a><a href="http://www.xmhjfb.com/wap.asp?mode=WAP&amp;act=View&amp;id=117&amp;Page=1">[[1]]</a><a href="http://www.xmhjfb.com/wap.asp?mode=WAP&amp;act=View&amp;id=117&amp;Page=1">[&gt;&gt;]</a><br/>
<br/>
<a href="wap.asp?act=Com&amp;id=117">查看评论(0)</a><br/>
<a href="wap.asp?act=AddCom&amp;inpId=117">发表评论</a><br/><br/>

<br/>

<br/>
<a href="http://www.xmhjfb.com/wap.asp">首页</a>
</p>
</card>
</wml>