부트스트랩 이미지

❮ 이전의 다음 ❯

부트스트랩 이미지 모양

둥근 모서리:

원:

썸네일:

둥근 모서리

클래스 는 .img-rounded이미지에 둥근 모서리를 추가합니다(IE8은 둥근 모서리를 지원하지 않습니다):

예시

원

클래스 는 .img-circle이미지를 원으로 만듭니다(IE8은 둥근 모서리를 지원하지 않음).

예시

썸네일

클래스 는 .img-thumbnail이미지를 축소판으로 만듭니다.

예시

반응형 이미지

이미지는 모든 크기로 제공됩니다. 스크린도 마찬가지입니다. 반응형 이미지는 화면 크기에 맞게 자동으로 조정됩니다.

태그 에 .img-responsive클래스를 추가하여 반응형 이미지를 만듭니다 . <img>그러면 이미지가 상위 요소에 맞게 조정됩니다.

.img-responsive클래스는 display: block;및 이미지에 max-width: 100%;적용 됩니다 .height: auto;

예시

이미지 갤러리

Bootstrap의 그리드 시스템을 클래스와 함께 .thumbnail사용하여 이미지 갤러리를 만들 수도 있습니다.

나는 두려움에 떨면서 임신하지 않을 때까지 그를 사랑할 것입니다.

참고: 이 튜토리얼의 뒷부분에서 그리드 시스템에 대해 자세히 알아볼 것입니다(열 수가 다른 레이아웃을 만드는 방법).

예시

<div class="row">
<div class="col-md-4">
    <div class="thumbnail">
      <a href="/w3images/lights.jpg">
        <img src="/w3images/lights.jpg" alt="Lights" style="width:100%">
        <div class="caption">
          <p>Lorem ipsum...</p>
        </div>
      </a>
    </div>
</div>
<div class="col-md-4">
    <div class="thumbnail">
      <a href="/w3images/nature.jpg">
        <img src="/w3images/nature.jpg" alt="Nature" style="width:100%">
        <div class="caption">
          <p>Lorem ipsum...</p>
        </div>
      </a>
    </div>
</div>
<div class="col-md-4">
    <div class="thumbnail">
      <a href="/w3images/fjords.jpg">
        <img src="/w3images/fjords.jpg" alt="Fjords" style="width:100%">
        <div class="caption">
          <p>Lorem ipsum...</p>
        </div>
      </a>
    </div>
</div>
</div>

반응형 삽입

또한 모든 장치에서 비디오 또는 슬라이드쇼의 크기를 적절하게 조정할 수 있습니다.

클래스는 <iframe>, <embed>, <video> 및 <object> 요소에 직접 적용할 수 있습니다.

The following example creates a responsive video by adding an .embed-responsive-item class to an <iframe> tag (the video will then scale nicely to the parent element). The containing <div> defines the aspect ratio of the video:

Example

What is aspect ratio?

The aspect ratio of an image describes the proportional relationship between its width and its height. Two common video aspect ratios are 4:3 (the universal video format of the 20th century), and 16:9 (universal for HD television and European digital television).

You can choose between two aspect ratio classes:

<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>


<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>

Complete Bootstrap Image Reference

For a complete reference of all image classes, go to our complete Bootstrap Image Reference.

❮ Previous Next ❯

부트스트랩 3 튜토리얼

부트스트랩 그리드

부트스트랩 테마

부트스트랩 예제

부트스트랩 CSS 참조

부트스트랩 JS 참조

부트스트랩 이미지