wiki:bootstrap:bootstrap_note:bs_images

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

--- wiki:bootstrap:bootstrap_note:bs_images [2021/03/25 09:08]
emblim98
+++ wiki:bootstrap:bootstrap_note:bs_images [2023/01/13 18:44] (현재)
@@ 줄 116: / 줄 116: @@
 \\
 =====Responsive Embeds=====
-또한 비디오 또는 슬라이드 쇼를 모든 장치에서 적절하게 확장 할 수 있습니다.\\
+또한 비디오 또는 슬라이드 쇼를 모든 장치에서 적절하게 화면 크기를 조정할 수 있습니다.\\
 \\
 클래스는 %%<iframe>, <embed>, <video> 및 <object>%% 요소에 직접 적용 할 수 있습니다.\\
@@ 줄 138: / 줄 138: @@
 </body>
 </HTML>
+\\
+===종횡비 (aspect ratio, 가로 세로 비율)===
+이미지의 종횡비는 이미지의 너비와 높이 사이의 비례 관계를 나타냅니다.\\
+두 가지 일반적인 비디오 종횡비는 4 : 3 (20 세기의 범용 비디오 형식)과 16 : 9 (HD TV 및 유럽 디지털 TV의 범용)입니다.\\
+\\
+두 가지 종횡비 클래스 중에서 선택할 수 있습니다.\\
+====예제====
+<HTML>
+<body>
+    <div class="container">
+        <h2>Responsive Embed</h2>
+        <p>Create a responsive video and scale it nicely to the parent element.</p>
+        <h2>Aspect ratio 4:3</h2>
+        <div class="embed-responsive embed-responsive-4by3">
+            <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
+        </div>
+        <h2>Aspect ratio 16:9</h2>
+        <div class="embed-responsive embed-responsive-16by9">
+            <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
+        </div>
+    </div>
+</body>
+</HTML>
 {{tag>오션 Bootstrap Images}}

/volume1/web/dokuwiki/data/attic/wiki/bootstrap/bootstrap_note/bs_images.1616630939.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)