이미지
반응형
img 태그에 .mdui-img-fluid 클래스를 추가하면 이미지가 부모 요소의 너비에 맞게 조정됩니다.
예시
<img class="mdui-img-fluid" src="image.png" />
둥근 모서리 이미지
img 태그에 .mdui-img-rounded 클래스를 추가하여 이미지에 둥근 모서리를 적용합니다.
예시
<img class="mdui-img-rounded" src="image.png" />
원형 이미지
img 태그에 .mdui-img-circle 클래스를 추가하여 이미지를 원형으로 만듭니다.
예시
<img class="mdui-img-circle" src="image.png" />
비디오
반응형 임베디드 비디오
임베디드 비디오의 부모 요소에 .mdui-video-container 클래스를 추가하면 비디오가 부모 요소의 너비에 맞게 조정됩니다.
예시
<div class="mdui-video-container">
<iframe
height="498"
width="510"
src="https://player.youku.com/embed/XNzUwOTk5MzE2"
frameborder="0"
allowfullscreen
></iframe>
</div>
반응형 HTML5 비디오
video 태그에 .mdui-video-fluid 클래스를 추가하면 비디오가 부모 요소의 너비에 맞게 조정됩니다.
예시
<video class="mdui-video-fluid" controls>
<source src="video.mp4" type="video/mp4" /></video
>
CSS 클래스 목록
| 클래스 이름 | 설명 |
|---|
.mdui-img-fluid | 반응형 이미지 |
.mdui-img-rounded | 둥근 모서리 이미지 |
.mdui-img-circle | 원형 이미지 |
.mdui-video-container | 반응형 임베디드 비디오 |
.mdui-video-fluid | 반응형 HTML5 비디오 |