테스트 사이트 - 개발 중인 베타 버전입니다

응답 성있는 삽입

· 8년 전 · 1351
응답 성있는 삽입

또한 모든 장치에서 비디오 또는 슬라이드 쇼를 올바르게 확장 할 수 있습니다.

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

다음 예제에서는 .embed-responsive-item클래스에 <iframe>태그 를 추가하여 반응 형 동영상을 만듭니다 (동영상은 부모 요소에 맞게 확장됩니다). 포함하는 항목 <div>은 동영상의 종횡비 를 정의합니다.


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

종횡비 란 무엇입니까?

이미지의 종횡비는 폭과 높이 사이의 비례 관계를 나타냅니다. 일반적인 비디오 가로 세로 비율은 4 : 3 (20 세기의 범용 비디오 형식)과 16 : 9 (HD TV 및 유럽 디지털 TV의 범용)입니다.

두 종횡비 클래스 중에서 선택할 수 있습니다.

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시글 목록

번호 제목
1418
부트스트랩 애니메이션 경고
1417
부트스트랩 경고 닫기
1416
부트스트랩 알림 링크
1414
1413
1412
1411
1410
부트스트랩 이미지 갤러리
1409
부트스트랩 반응 형 이미지
1408
1407
1406
1405
부트스트랩 반응 형 테이블
1404
부트스트랩 문맥 분류
1403
부트스트랩 요약 표
1402
부트스트랩 호버 행
1401
부트스트랩 테두리가있는 표
1400
1399
1398
1397
1396
1395
1394
부트스트랩 <blockquote>
1393
부트스트랩 <abbr>
1392
부트스트랩 <mark>
1391
부트스트랩 <small>
1390
1389
1388
부트스트랩 3 개의 동일한 열