Cum afișezi imagini și filme responsive?

De când a apărut moda asta cu responsive, a apărut și problema imaginilor sau a filmelor afișabile pe toate rezoluțiile. Îți prezint o soluție foarte simplă ce funcționează cu succes pe orice browser. ORICE browser!

max-width

Un mod eficient de a te asigura că imaginile nu vor depăși ecranul este de a adăuga img { max-width:100; height:auto } în CSS. În acest fel, orice imagine va putea fi maximum cât containerul ei. Sunt foarte puține cazurile în care nu ai nevoie de această regulă, iar eu o adaug imediat după css reset.

Filme

Soluția asta am testat-o la zeci de proiecte și funcționează cam așa: poziționezi absolut filmul într-un div cu înălțime zero. Este mai ușor de arătat decât de explicat:

.embed {
  position:relative;
  height:0;
  overflow:hidden;
  padding-top:56%;
}

.embed > * {
  position:absolute;
  left:0;
  top:0;
}

.embed > *,
.embed iframe,
.embed video {
  width:100%;
  height:100%;
}

Demo