html5图片高度自适应解决方法

最新推荐文章于 2022-12-09 18:00:57 发布

weixin_30530339

最新推荐文章于 2022-12-09 18:00:57 发布

阅读量427

点赞数

原文链接：http://www.cnblogs.com/zhongfufen/p/4029127.html

版权

今天遇到一个HTML5图片高度自适应各个设备问题，网上找到一个解决方法，跟大家分享下。

由于<body>标签的图片不能够拉伸，

解决办法：

1、图片不够大，又background属性不能拉伸图片；

2、只能用个div，把其z-index值设为负，并使这个div大小为整个body大小，在div里用<img>

3、body的background属性去掉，要不然会被遮住。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>Hello World</title>
<meta content="width=640, target-densitydpi=320, user-scalable=no" name="viewport" /> 
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta content="telephone=no" name="format-detection" />
</head>    
<body>    
<div id="Layer1" style="position:absolute; width:100%; height:100%; z-index:-1">    
<img src="pictures/background.jpg" height="100%" width="100%"/>    
</div>    
</body>    
</html>

——非原创，摘自CSDN。

转载于:https://www.cnblogs.com/zhongfufen/p/4029127.html

weixin_30530339

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5图片高度自适应解决方法

今天遇到一个HTML5图片高度自适应各个设备问题，网上找到一个解决方法，跟大家分享下。由于<body>标签的图片不能够拉伸，解决办法：1、图片不够大，又background属性不能拉伸图片；2、只能用个div，把其z-index值设为负，并使这个div大小为整个body大小，在div里用<img>3、body的background属性去掉，要不然会被遮住...
复制链接

扫一扫