html5如何设置图片自适应屏幕宽度,这个指令有助于使得浏览网页的时候更加灵活,用户体验会增加。
打开编辑器,这里以sublime text3作为示范。这个时候需要创建一个html文件,并且把图片放在同一个文件夹里面。
然后我们先定义HTML的基本框架。
我们需要利用img来定义需要插入的图片,src就是实际图片的文件名字。 这个时候就会显示图片了。
接下来需要创建一个css文件,也是放在同一个文件夹。
现在就可以定义id,比如class="suit",自己起个名字,然后id可以定义在div里方便分区。
然后要记得加上 。
这个时候就可以设置css文件了。 .suit img { background-size: contain|cover; width:100% height:auto; }
这个时候刷新一下就会发现可以适应屏幕了。