이미지가 없습니다 반응

Question

아웃

을 넣어하지 원본 이미지 크기 : 463px 내가 바로 문제를 복사에 의한 이미지를 제거한 X 339px

.

HTML

<div class="col-md-4"> 
    <div class="item-block event-details" id="video-container"> 
    <img src="/Resources/images/6b0c5d49-9a76-4a09-afb7-5bfa2ed508f7.jpg" class="img-responsive"> 
    </div> 

CSS

.item-block.event-details { 
position: relative; 
overflow: hidden; 
height: 214px; 
} 

.item-block { 
color: #4b4e4e; 
border-radius: 4px; 
border: 1px solid #d4d4d4; 
box-shadow: 0px 1px 1px #b0b6b6; 
position: relative; 
margin-bottom: 30px; 
} 

.img-responsive { 
display: block; 
max-width: 100%; 
height: auto; 
} 

질문 : 왜 이런 일 당신이 말해 줄 수 있습니까? 위의 부모 div 크기에 전체 이미지를 표시해야합니다.하지만 그런 일은 일어나지 않습니다. 이유를 말해 줄 수 있습니까? 즉, 이미지가 상위 div에 맞지 않습니다.

Answer 1

당신의 부모 DIV 어떤 이유로 그 높이가 될 필요가있는 경우, 당신은 설정할 수 있습니다 모두 max-width 및 max-height-100%

.img-responsive { 
    display: block; 
    margin: 0 auto; /* to center the image horizontally in parent div */ 
    max-width: 100%; 
    max-height: 100%; 
} 

Answer 2

.img 반응 형 CSS 클래스에서 반대를 수행해야한다고 생각합니다. 의 그 해보자 :

.img-responsive { 
    display: block; 
    width: 100%; 
max-height: auto; 
} 

Answer 3

작성할 필요가 없습니다

최대 너비 : 100 %; 당신이 반응하는 이미지를 원하는 경우에는 다음에 대한 모든 잊지 부트 스트랩 사용하는 경우 당신은

.img-responsive { 
display: block; 
width: 100%; 
max-height: 100%; 
} 

를 작성할 수 있습니다. img 태그에 반응하는 img-class 클래스를 추가하기 만하면된다. Demo