javascript - 能否利用css自动计算一个div的高度？

Question

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

代码是这样

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

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

3、一些解决方法、思路
1）直接将img外面的p定高：这种是不行的，因为手机屏幕的宽度是不同的，所以在不同手机下，图片的高度是不同的，所以不能直接设置p的高度
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);
        }
    });
});

Answer 1

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

Answer 2

可以从以下几个方面入手考虑：
1.一开始让整个画面处于loading状态（可以让画面不显示，或者有loading的提示等），然后等到图片加载完了(load),再显示整个画面。我记得flexslider.js官网示例是这么做的，感觉体验还可以。
2.既然你已经使用了js，可以考虑在文字内容加载之前计算手机屏幕宽度，然后根据图片的比例（已知）计算出高度，赋给图片外面的p。
3.优化你使用的图片，使之容量变小，从而提高体验。
4.关于提到的css表达式，这个非常不推荐用，对web的性能有害无益。

Answer 3

可以把小图换成一个有背景色的p。

Answer 4

为什么这么复杂？
给img设置最小高度不就好了吗。

img {
    width: 100%;
    height: auto;
    min-height: xxx;
}

注：即使图片没有加载出来，浏览器依旧会给其占位空间。