menuMDUIDocs
color_lens
Material Design 3 ve Web Components tabanlı yeni mdui 2 yayınlandı, mdui 2 dokümantasyonuna gidin.

Medya

mdui, resimler ve videolar için onlara duyarlı (responsive) özellikler ve bazı önceden tanımlanmış stiller kazandıran sınıflar tanımlar.

İlgili Okumalar

Material Design tasarım yönergeleri: Stiller - Görüntü

Resim

Duyarlı

img etiketine .mdui-img-fluid sınıfı eklemek, resmin üst öğesinin genişliğine uyum sağlamasını sağlar.

codeplay_arrow
Örnek
<img class="mdui-img-fluid" src="image.png" />

Yuvarlak köşeli resim

img etiketine .mdui-img-rounded sınıfı ekleyerek resme yuvarlak köşeler kazandırın.

codeplay_arrow
Örnek
<img class="mdui-img-rounded" src="image.png" />

Dairesel resim

img etiketine .mdui-img-circle sınıfı ekleyerek resmi dairesel hale getirin.

codeplay_arrow
Örnek
<img class="mdui-img-circle" src="image.png" />

Video

Duyarlı gömülü video

Gömülü videonun üst öğesine .mdui-video-container sınıfı ekleyerek videonun üst öğenin genişliğine uyum sağlamasını sağlayın.

code
Örnek
<div class="mdui-video-container">
  <iframe
    height="498"
    width="510"
    src="https://player.youku.com/embed/XNzUwOTk5MzE2"
    frameborder="0"
    allowfullscreen
  ></iframe>
</div>

Duyarlı HTML5 video

video etiketine .mdui-video-fluid sınıfı ekleyerek videonun üst öğenin genişliğine uyum sağlamasını sağlayın.

codeplay_arrow
Örnek
<video class="mdui-video-fluid" controls>
  <source src="video.mp4" type="video/mp4" /></video
>

CSS Sınıf Listesi

Sınıf AdıAçıklama
.mdui-img-fluidDuyarlı resim
.mdui-img-roundedYuvarlak köşeli resim
.mdui-img-circleDairesel resim
.mdui-video-containerDuyarlı gömülü video
.mdui-video-fluidDuyarlı HTML5 video
arrow_backPrevious
Simgeler
arrow_forwardNext
Yardımcı Sınıflar