머티리얼 디자인 3 및 웹 컴포넌트 기반의 새로운 mdui 2가 출시되었습니다. mdui 2 개발 문서 보기.

미디어

mdui는 이미지와 비디오를 위해 몇 가지 클래스를 정의하여 반응형 특성과 미리 정의된 스타일을 가질 수 있게 합니다.

이미지

반응형

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 비디오

아이콘

보조 클래스

미디어

관련 읽기

이미지

반응형

둥근 모서리 이미지

원형 이미지

비디오

반응형 임베디드 비디오

반응형 HTML5 비디오

CSS 클래스 목록