부트 스트랩 반응 형 이미지 레이아웃 - 크기 조정

Question

저는이 부트 스트랩 템플릿을베이스로 사용하고 있습니다 : http://startbootstrap.com/templates/grayscale/과 같은 결과를 얻으려고하지만 GRAYSCALE 큰 텍스트 대신 421x515px의 이미지를 사용하고 싶습니다.

내 문제는 원본 페이지 (위 링크 참조)에서 아래쪽 화살표가 화면 해상도에 관계없이 계속 표시된다는 것입니다. 그 복제에 문제가 있습니다. 누구든지 제발 도와 주실 래요?

이미지에 "img-responsive"클래스를 사용했지만 작동하지 않는 것 같습니다 (이미지의 크기를 조정하지 않음).

누구든지 도움을 줍니까? 감사.

편집 : 여기 예 링크 : http://jsfiddle.net/x8EpU/5/

<img src="http://placehold.it/421x515" class="img-responsive"> 

Answer 1

아래쪽 화살표 실제로 해상도로 볼 수 유지하지 않습니다. 브라우저를 매우 짧게 만들면 화면에서 벗어날 수 있습니다. 실제로는 블록 전체를 세로로 (제목, 텍스트 및 화살표) 중앙에 배치하지만 화면이이 내용보다 짧으면 제대로 표시되지 않습니다.

큰 이미지를 사용하여 코드의 크기를 화면 높이보다 크게 만들었습니다. 브라우저를 몇 번 축소하면 이미지와 함께 제대로 작동하는 것을 볼 수 있습니다.

img에 img-responsive 클래스를 제거하고 다음과 같은 스타일을 추가하십시오 : max-width: 100%; max-height: 150px;