如何写移动页面的顶部大图

在开发html5的移动项目会经常出现某个页面的顶部需要加载一张很大的图,如果按照正常的情况来写就可能会出现大图还没加载完毕,图下面的数据已经加载出来了.等大图加载出来后就会把内容往下顶,这对用户的体验非常的不友好.为了解决这个问题我们可以按照下面这种方法来写:

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    *{
	   padding:0px;
	   margin:0px;
	}
    .main{
	   width:375px;
	   margin:0px auto;
	}
	.header{
	   position:relative;
	   width:100%;
	   height:0;
	   padding-top:100%;
	}
	.header img
	{
          position:absolute;
	  top:0px;
	  left:0px;
	  height:100%;
	  width:100%;
	}
  </style>
 </head>
 <body>
      <div class="main">
	        <div class="header">
                  <img src="1.jpg" alt="">  
			</div>
			<div class="body">
			 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum veniam sit accusamus eligendi aliquid nemo quia aliquam perspiciatis nobis nam culpa quae quas animi totam ullam corrupti officiis labore cumque.
			 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum veniam sit accusamus eligendi aliquid nemo quia aliquam perspiciatis nobis nam culpa quae quas animi totam ullam corrupti officiis labore cumque.
			</div>
	  </div>
 </body>
</html>

这里面的关键点就是.header这个类当高度设为0，然后padding用百分比表示的时候,这个div的最终展现的高度就是其宽度的百分之多少.也就是说,当设置padding-top为100%时,这个div的宽高相等,当设置为50%时,高就是宽度的一半.由于这是由padding撑起的高度,要想在里面显示图片,图片就必须相对它做绝对定位.

如此一来,对于盛装图片的外部容器div来说,我们可以通过padding设置它的宽高比，此时只需要保证图片的宽高比和外部容器的宽高比相等就不会失真了,然后将图片的宽高都设为100%即可.这样一来,就算图片还没加载出来,它的大小在加载时就已经被固定了.

当padding设为100%时,即图片的容器为正方形:

当图片没加载出来时,它的宽高也是随手机屏幕的宽而固定了,不会影响图片下面的内容

brokenkay

发布了20 篇原创文章 · 获赞 4 · 访问量 1万+

私信关注

如何写移动页面的顶部大图

猜你喜欢