부트스트랩 반응형 이미지를 구현하는 방법에 대한 간략한 설명

이 글에서는 반응형 이미지를 구현하는 방법을 부트스트랩 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

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

프로젝트 애플리케이션에서 반응형 이미지의 두 가지 일반적인 형태:

: 화면 크기가 변경되면 그에 따라 이미지 레이아웃도 변경됩니다. PC와 모바일 장치 간의 변환에 적응하기 위해 두 가지 이미지 리소스 세트가 사용됩니다.

1: 화면 크기가 변경되고 그에 따라 사진 레이아웃도 변경됩니다

<div>
       <div>
           <div>
               <img  class="img-responsive center-block lazy" src="/static/imghwm/default1.png" data-src="img/box-logo.png" alt="부트스트랩 반응형 이미지를 구현하는 방법에 대한 간략한 설명" >
           </div>
           <div>
            <img  class="img-responsive center-block lazy" src="/static/imghwm/default1.png" data-src="img/google-logo.png" alt="부트스트랩 반응형 이미지를 구현하는 방법에 대한 간략한 설명" >
            </div>
            <div>
                <img  class="img-responsive center-block lazy" src="/static/imghwm/default1.png" data-src="img/intuit-logo.png" alt="부트스트랩 반응형 이미지를 구현하는 방법에 대한 간략한 설명" >
            </div>
            <div>
                <img  class="img-responsive center-block lazy" src="/static/imghwm/default1.png" data-src="img/square-logo.png" alt="부트스트랩 반응형 이미지를 구현하는 방법에 대한 간략한 설명" >
            </div>
        </div>
   </div>

효과:

1. 데스크톱 사진보다 큼(>996px)

2. 태블릿(>768px
3. 휴대폰 (
2: PC와 모바일 기기 간의 변환에 적응하려면 두 세트의 이미지 리소스를 사용하세요.

<div>
       <img  class="visible-xs img-responsive lazy" src="/static/imghwm/default1.png" data-src="1.jpg" alt="부트스트랩 반응형 이미지를 구현하는 방법에 대한 간략한 설명" >
       <img  class="hidden-xs img-responsive lazy" src="/static/imghwm/default1.png" data-src="2.jpg" alt="부트스트랩 반응형 이미지를 구현하는 방법에 대한 간략한 설명" >
   </div>

두 세트의 이미지 리소스는 페이지 지연을 방지하고 트래픽을 절약하는 데 도움이 됩니다.

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 교육을 방문하세요! !

위 내용은 부트스트랩 반응형 이미지를 구현하는 방법에 대한 간략한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!