我是网站开发新手。我正在使用 Bootstrap 并尝试显示图像控件。这是代码片段:
<div class="col-md-12 col-xs-12">
<img src="http://upload.wikimedia.org/wikipedia/commons/c/c6/Sierpinski_square.jpg" class="img-responsive center-block"/>
</div>
以上代码可以正确显示图片。但是如果我切换到这个:
<div id="post-image" class="col-md-12 col-xs-12">
</div>
并使用 JQuery 控件 ( https://github.com/websanova/wScratchPad ) 加载图像,如下所示:
$( window ).load(function() {
$('#post-image').wScratchPad({
bg: 'path/to/image',
fg: 'http://upload.wikimedia.org/wikipedia/commons/c/c6/Sierpinski_square.jpg',
'cursor': 'url("path/to/image") 5 5, default'
});
});
我看到图片可以加载,但是无法正常显示。图片高度变为1,显示如下:
我想知道我是否做错了什么导致 HTML 无法根据下载的图像大小进行刷新?谢谢
最佳答案
几件事。
您不需要同时使用 col-md-12 和 col-xs-12。这些类是自下而上的,这意味着 col-xs 将显示 xs 到 lg。如果您希望它在中等尺寸下显示不同,则只需要 md 标签。
将 div 上的 style="min-height:..."设置为图像的高度。
关于javascript - Bootstrap 显示异步图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25706313/