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

Un comentariu to “Cum afișezi imagini și filme responsive?”

  1. Tehnica prezentata este ok strict pentru aspectul imaginilor, dar nu trateaza si dimensiunea propriu-zisa a imaginii, uneori simtindu-se la viteza. Gasisem cateva “hooks” care, pe langa afisarea responsive a imaginii, faceau si o versiune mai mica a acesteia si o incarcau pe cea dorita, in functie de rezolutie.
    Doua scripturi care-si fac treaba destul de bine se gasesc aici http://squeezr.it/ si aici http://adaptive-images.com :)

Show trackbacks

Ți-a plăcut articolul? Lasă un comentariu!

You can insert code snippets using BBcode:
[js].[/js] [html].[/html] [php].[/php] [css].[/css]
You can also use some HTML tags:
<blockquote>.</blockquote> <code>.</code> <a href="">.</a> <strong>.</strong> <em>.</em>

windows apple dropbox facebook twitter