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%; }
- Posted in:
- CSS
- Tags:
- CSS,
- Responsive
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