Bootstrap 3

[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 영상

 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
basic BS3 - HOME (소개) - BS3 vs BS4 차이 (= BS차이)
basic BS3 - Start (시작) ★ - BS다운 / BSCDN / BS구문
basic BS3 - Grid (그리드) ★★★ - (BS3그리드 vs BS4그리드)
basic BS3 - Text/Typography(BS글자 = BS텍스트) (= BS4글자 vs BS3글자) BS글자색
basic BS3 - Table (BS테이블) - 테이블테두리 + 테이블배경색 + 반응형테이블
basic BS3 - Image (BS이미지) - 반응형이미지 + 반응형동영상 + 이미지정렬
basic BS3 - Jumbotron/page-header (BS점보트론 / BS페이지헤더) - 큰글씨, 글자키우기
basic BS3 - Well (BS웰 = BS회색상자) ★ - BS회색배경상자 (= BS회색박스 = BS웰클래스)
basic BS3 - Alert (BS경고 = BS얼럿 = BS경보) - 배경색 + 글자색 + 링크색 + 닫기 + 애니…
basic BS3 - Button (BS버튼) ★ - 버튼색깔 + 버튼크기 + 버튼활성화 + 버튼비활성화
basic BS3 - Button Group (BS버튼그룹) ★
basic BS3 - Icon (아이콘) - Glyphicon/Font Awesome/Google Material De…
basic BS3 - Progress Bar (BS진행바 = BS진행상태표시 = BS진도바 = BS프로그레스바) - I…
basic BS3 - Pagination (BS페이징 = BS페이지번호 = BS페이징 = BS패지네이션) + Bread…
basic BS3 - Pager (BS페이저) - 이전페이지/다음페이지 (= 앞으로가기/뒤로가기)
1/4
목록
 홈  PC버전 로그인 일본어
웹디자인언어
서버관리언어
고급코딩언어
그누보드 1
제작의뢰 1
Q&A
커뮤니티 3
웹유틸
회원센터
홈짱 PC버전 로그인