부트스트랩에서 이미지를 화면에 맞게 조정하는 방법

부트스트랩이 이미지를 화면에 적응시키는 방법

부트스트랩 반응형 이미지의 올바른 설정은 img에 두 개의 클래스를 추가하는 것입니다.

<img  class="img-responsive center-block lazy"  src="/static/imghwm/default1.png"  data-src="..."     alt="부트스트랩에서 이미지를 화면에 맞게 조정하는 방법" >

콘텐츠 페이지에 있는 경우 js를 사용하여 각 img에 속성을 추가하세요.

$(window).load(function(){
 
    $(".panel-body img").addClass("img-responsive center-block");
 
})

Bootstrap 버전 3에서는 이미지에 .img-반응형 클래스를 추가하여 이미지가 반응형 레이아웃을 지원할 수 있습니다. 핵심은 이미지의 max-width: 100%;, height: auto; 및 display: block; 속성을 설정하여 이미지의 상위 요소에서 크기를 더 잘 조정할 수 있도록 하는 것입니다.

.img-반응형 클래스를 사용하여 이미지를 수평으로 중앙에 배치해야 하는 경우 .text-center 대신 .center-block 클래스를 사용하세요.

SVG 이미지 및 IE 8-10

Internet Explorer 8-10에서 .img 응답으로 설정된 SVG 이미지는 크기가 고르지 않게 표시됩니다. 이 문제를 해결하려면 문제가 발생한 곳에 width: 100% 9; 를 추가하세요. 부트스트랩은 모든 이미지 요소에 대해 이 속성을 자동으로 설정하지 않습니다. 이로 인해 다른 이미지 형식이 엉망이 될 수 있기 때문입니다.

관련 추천: "부트스트랩 튜토리얼"

위 내용은 부트스트랩에서 이미지를 화면에 맞게 조정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!