부트 스트랩 모달에서 이미지를 반응 적으로 만들려면 어떻게해야합니까?

Question

이미지를 클릭하면 이미지의 더 큰 버전을 보여주는 이미지 갤러리가 있습니다.

문제는 이미지의 더 큰 버전이 모달에 대해 커야한다는 것입니다. 즉, 대형 화면이있는 컴퓨터에서 페이지를 볼지라도 스크롤바가 있습니다.

다른 해상도가있을 때 크기가 조정되도록 모달의 이미지를 반응 형으로 만들고 싶습니다.

또한 휴대 전화에서 모달 뷰를 사용하는 데 문제가 있는지 알고 싶습니다.

동적으로 다른 이미지를 설정

$(document).ready(function() {$(document).on("click", ".open-ImageModal", function() { 
      $(".modal-body #image").attr("src", $(this).data('id')); 
      var desc = $(this).data('desc'); 
      $(".modal-body #description").text(desc); 
     }); 
    }); 

이며 적응 이미지를하고자 할 때 해당 이미지 링크가 큰 .IMG 응답 작품을 사용

<a data-toggle="modal" data-id="Images/FullImages/LargeVersion.jpg" data-desc="Descriptive text" class="open-ImageModal" href="#imageModal"> 
          <img src="Images/Thumbs/SmallVersion.jpg" /> 
         </a> 

Answer 1

이다 내가 가진 스크립트 포함하는 객체의 폭 원하는 경우 이미지를 높이 대신 조정하면됩니다. 예 :

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