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%;
}

如果您尝试运行小提琴http://jsfiddle.net/ocL7wf9j/，您会看到在图片加载之前，它下方的文字显示在页面顶部（可以预期，因为浏览器不是图像尺寸在它获取图像文件之前） - 我希望它从一开始就显示在适当的位置。图像的尺寸对我来说是已知的（例如，对于小提琴中的示例图像，它们是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>

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

1 个答案: