[basic] BS3 - Image (BS이미지) - 반응형이미지 + 반응형동영상 + 이미지정렬

image

image 클래스 종류

[모양] 

 

.img-rounded  :  곡선 이미지 (= 꼭지점이 둥근 이미지)

.img-circle  :  원형 이미지

.img-thumbnail  :  액자 이미지 (= 액자처럼 테두리 있는 이미지)

 

IE9 이상 곡선・원형 이미지 지원. 

---

[반응형] 

 

.img-responsive  :  반응형 이미지 (속성값: display: block; max-width: 100%; height: auto;)

 

※ IE 8-10에서 .img-responsive와 SVG 이미지 불균형 해결: width: 100% \9; 추가. 

※ BS는 다른 이미지 포멧에 문제 일으킬 여지 있어 자동 적용 배제된 상태. 

---

[중앙정렬]

 

.text-center  :  일반이미지 중앙정렬

.center-block  :  .img-responsive 반응형 이미지 중앙 정렬

 

image 모양  

 

<img src="..." class="img-rounded" alt="곡선 이미지" >

<img src="..." class="img-circle" alt="원형 이미지">

<img src="..." class="img-thumbnail" alt="액자 이미지" >

 

image 반응형 

 

<img src="..." class="img-responsive" alt="반응형 이미지">

 

image 썸네일 갤러리

 

<div class="row">

    <div class="col-md-4">

        <div class="thumbnail">

            <a href="링크주소">

                <img src="이미지주소" alt="이미지이름" style="width:100%">

                <div class="caption">

                    <p>제목</p>

                </div>

            </a>
      </div>
    </div>

 

    <div class="col-md-4">

        <div class="thumbnail">

            <a href="링크주소">

                <img src="이미지주소" alt="이미지이름" style="width:100%">

                <div class="caption">

                    <p>제목</p>

                </div>

            </a>
      </div>
    </div>

 

    <div class="col-md-4">

        <div class="thumbnail">

            <a href="링크주소">

                <img src="이미지주소" alt="이미지이름" style="width:100%">

                <div class="caption">

                    <p>제목</p>

                </div>

            </a>
      </div>
    </div>

</div>

 

---

 

[참고]

 

.thumbnail {

    display: block;

    padding: 4px;

    margin-bottom: 20px;

    line-height: 1.42857143;

    background-color: #fff;

    border: 1px solid #ddd;

    border-radius: 4px;

    -webkit-transition: border .2s ease-in-out;

    -o-transition: border .2s ease-in-out;

    transition: border .2s ease-in-out;

}

 

video

<iframe> <embed> <video> <object> 반응형영상

 

<div class="embed-responsive embed-responsive-16by9">

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

</div>

 

---

 

[참고]
.embed-responsive-16by9 : 16:9 영상
.embed-responsive-4by3  :  4:3 영상