开发者社区> 问答> 正文

能否利用css自动计算一个div的高度?

杨冬芳 2016-05-31 10:19:36 959

1、背景说明:
开发一个手机页面,页面很简单,结构如下图所示,上面是一个图片,下面是页面的内容,要求是图片横向为100%屏幕宽度,并且比例保持不变,所以我只设置了图片的宽度,未设置高度。
screenshot
代码是这样

<style>
body,html{margin:0px;}
div{border:solid 1px #000;}
</style>
<div>
    <img src="1.jpg" width="100%" />
</div>
<div>
页面内容示例:<br />
测试<br />
测试<br />
测试<br />
</div>

2、问题描述:
问题是这样:图片加载是需要时间的,而内容部分却加载很快,所以会出现整个页面先有内容部分,图片加载完后,再把内容“挤”到下面来(不知道这样描述有没有说清楚)。这样的显示效果感觉不太友好。

3、一些解决方法、思路
1)直接将img外面的div定高:这种是不行的,因为手机屏幕的宽度是不同的,所以在不同手机下,图片的高度是不同的,所以不能直接设置div的高度
2)css计算的方式?不确定css有没有这种功能,比如height:calc(device-width * 0.6)
3)用js加载图片和内容,以控制加载顺序,也就是用js先加载图片,加载完成后,在加载或显示页面内容。这种是ok的,但是感觉好麻烦,我更希望可以用css来解决。
4)考虑到图片加载慢是因为图片比较大,所以考虑采用先加载一个小图片,再用js替换加载大图片并替换掉,但是预览发现,虽然是小图,实际上还是有前面提到的问题,我试了,5KB都会,哎。代码如下:


//效果是先用src加载一个模糊的图片,然后再换成realsrc的高清图片
<img id="bannerImg" src="small.jpg" realsrc="big.jpg" width="100%"/>
$(function(){
    $("img[realsrc]").each(function(){
        var img = this;
        var realsrc = $(this).attr("realsrc");
        var tmp = new Image();
        tmp.src = realsrc;
        tmp.onload = function(){
            $(img).attr("src", realsrc);
        }
    });
});
前端开发 JavaScript
分享到
取消 提交回答
全部回答(1)
  • 杨冬芳
    2019-07-17 19:21:25

    你的意思是,你其实已经知道图片的宽高比了对吧?
    那就这样,在img外面套一个div。
    div的css如下:position:relative;height:0;padding-bottom: 20%(你的图片宽高比);
    img的css:position:absolute;top:0;bottom:0;left:0;right:0;
    思路跟你想用div占空间的想法是一样的,只不过不要用height定高,要用padding

    0 0

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题
推荐课程