html - 在移动设备上设置全宽图像的高度

Question

移动网页上有一个全页图像 (width=100%)。加载页面时，图像下方的元素会在其上方的元素之后显示片刻，就好像图像不存在一样 - 直到图像被加载 - 然后它们被向下移动到它们的正常位置。我能以某种方式摆脱闪烁吗？

问题是不同的移动设备屏幕宽度不同，所以无法提前设置图片高度。图像的宽高比是已知的，但这似乎没有帮助。

澄清一下，我的代码是:

<meta name="viewport" content="width=device-width, initial-scale=1.0, scrollbar=no"/>
...
<div class="image-container">
    <img src="..."/>
</div>
<div>
    Text after the image
</div>

CSS:

.image-container {
    width: 100%;
}

.image-container img {
    width: 100%;
}

如果您尝试运行 fiddle http://jsfiddle.net/ocL7wf9j/ ，您会看到在图像加载之前，它下面的文本显示在页面顶部(这是可以预料的，因为浏览器在获取图像文件之前不会确定图像尺寸)-我希望它显示在从一开始就放在适当的位置。我知道图像的尺寸(例如，对于 fiddle 中的示例图像，它们是 640x229)，但我怎样才能让它适用于所有屏幕宽度？

Answer 1

您可以添加一些 JavaScript 来更改 <div class="image-container"> 的高度每当页面加载或窗口调整大小时。我建议使用 JQuery(一个 JavaScript 库)来执行此操作。

var aspectratio = 2.8;
var image = $('.image-container');
$(window).on('resize', function () {
    var width = $('.image-container').width();
    image.height(width / aspectratio);
}).trigger('resize'); //on page load

这是一个有效的 JSFiddle:https://jsfiddle.net/ocL7wf9j/11/

您可以从 Google 免费在您的网站上包含 JQuery。

<script type="text/javascript">
    document.write("\<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'>\<\/script>");
</script>