html5设置图片自适应屏幕宽度

HTML网页的开发中，需要对大小不一的屏幕兼容，使图片在不同的设备中可以展示预期的效果。自适应屏幕的宽度，利用css中background属性可以实现

工具/材料

浏览器，文本编辑器

新建一个HTML文件，代码如下图

打开HTML文件所在的文件夹，双击文件，跳转到浏览器

改变浏览器大小，发现图片没有变化，显示不全

在所在文件夹下，新建一个样式文件，命名为 auto.css，代码如下

在HTML文件中加上对样式文件的引用，返回文件夹，双击HTML文件，发现浏览器的变化会引着图片一起变化，自适应屏幕的大小

如果通过css设置背景图，那么图片尺寸要足够大，目前大宽屏1920左右，所以宽度最好设置为1920，然后居中；如果通过div嵌入图片，那么将此div设置成绝对定位，z-index：-1。

万维网上的一个超媒体文档称之为一个页面（外语：page）。作为一个组织或者个人在万维网上放置开始点的页面称为主页（外语：Homepage）或首页，主页中通常包括有指向其他相关页面或其他节点的指针（超级链接），所谓超级链接，就是一种统一资源定位器（Uniform Resource Locator，外语缩写：URL）指针，通过激活（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。在逻辑上将视为一个整体的一系列页面的有机集合称为网站（Website或Site）。超级文本标记语言（英文缩写：HTML）是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。

网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。

让图片自动适应整个屏幕，body{ background:url(图片地址)}即可

也可以单独设置横向或者纵向铺满background-repeat: repeat-x repeat-y

如果让一些小图片在此上面做超链接的话，只要设置背景图片了，那么在你设置背景图片区域的div内，可以随意设置图片做超链接比如：

<div class="bakimg">

<a href="链接地址"><img src="图片地址" /></a>

</div>

比如你给div中class设置了一个背景图片，那么你在他的背景区域内可以随意的加超链接

希望我的回答能帮到你，如果还有其他问题，请继续追问我

---