목차
Bootstrap Images
- description : Bootstrap Images
- author : 오션
- email : shlim@repia.com
- lastupdate : 2021-03-24
Rounded Corners
.img-rounded 클래스는 이미지에 둥근 모서리를 추가합니다.(IE8은 둥근 모서리를 지원하지 않습니다):
예제
Rounded Corners
The .img-rounded class adds rounded corners to an image (not available in IE8):
Circle
.img-circle 클래스는 이미지를 원형으로 만듭니다.(IE8은 둥근 모서리를 지원하지 않습니다):
예제
Circle
The .img-circle class shapes the image to a circle (not available in IE8):
Thumbnail
.img-thumbnail 클래스는 이미지를 썸네일(축소 이미지)로 만듭니다:
예제
Thumbnail
The .img-thumbnail class creates a thumbnail of the image:
Responsive Images
이미지의 크기는 다양합니다. 화면도 마찬가지입니다. 반응형 이미지는 자동으로 화면크기에 맞게 조정됩니다.
.img-responsive 클래스를 <img> 태그에 추가하여 반응형 이미지를 만듭니다. 그러면 이미지가 부모 요소에 맞게 조정됩니다.
.img-responsive 클래스는 이미지에 display: block, max-width: 100%, height: auto; 속성을 적용합니다.
예제
Image
The .img-responsive class makes the image scale nicely to the parent element (resize the browser window to see the effect):
Image Gallery
.thumbnail 클래스와 함께 Bootstrap의 그리드 시스템을 사용하여 이미지 갤러리를 만들 수도 있습니다.
예제
Image Gallery
The .thumbnail class can be used to display an image gallery.
The .caption class adds proper padding and a dark grey color to text inside thumbnails.
Click on the image to enlarge them.
Responsive Embeds
또한 비디오 또는 슬라이드 쇼를 모든 장치에서 적절하게 화면 크기를 조정할 수 있습니다.
클래스는 <iframe>, <embed>, <video> 및 <object> 요소에 직접 적용 할 수 있습니다.
다음 예제는 .embed-responsive-item 클래스를 <iframe> 태그에 추가하여 반응 형 비디오를 만듭니다.
(비디오는 상위 요소에 맞게 조정됩니다). 포함하는 <div>는 비디오의 종횡비를 정의합니다.
예제
Responsive Embed
Create a responsive video and scale it nicely to the parent element with an 16:9 aspect ratio
종횡비 (aspect ratio, 가로 세로 비율)
이미지의 종횡비는 이미지의 너비와 높이 사이의 비례 관계를 나타냅니다.
두 가지 일반적인 비디오 종횡비는 4 : 3 (20 세기의 범용 비디오 형식)과 16 : 9 (HD TV 및 유럽 디지털 TV의 범용)입니다.
두 가지 종횡비 클래스 중에서 선택할 수 있습니다.
예제
Responsive Embed
Create a responsive video and scale it nicely to the parent element.