javascript - Bootstrap 显示异步图像

Question

我是网站开发新手。我正在使用 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 无法根据下载的图像大小进行刷新？谢谢

Answer 1

几件事。

1. 您不需要同时使用 col-md-12 和 col-xs-12。这些类是自下而上的，这意味着 col-xs 将显示 xs 到 lg。如果您希望它在中等尺寸下显示不同，则只需要 md 标签。

2. 将 div 上的 style="min-height:..."设置为图像的高度。