부트 스트랩 디스플레이 비동기 이미지

Question

웹 사이트 개발에 처음입니다. 부트 스트랩을 사용하고 이미지 컨트롤을 표시하려고합니다. 여기 코드는 다음과 같습니다

<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는 모두 필요하지 않습니다. 클래스는 bottom-up으로, col-xs가 xs에서 lg까지 표시됩니다. 중간 크기로 다르게 표시하려면 md 태그 만 필요합니다.

2. div의 이미지 높이에 style = "min-height : ..."를 설정합니다.