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：...”设置为图像的高度。