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

1、背景说明：

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

代码是这样

body,html{margin:0px;}

div{border:solid 1px #000;}

页面内容示例：

测试

测试

测试

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的高清图片

$(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);

}

});

});