“Responsive”… ce bine suna… “responsive”. “Responsive” reprezinta calitatea paginilor internet de a se adapta oricarui display. Astfel, indiferent daca ai un telefon cu o rezolutie de 300 pixeli, o tableta de 1024 pixeli sau un monitor x-large, site-ul va arata bine.
Si daca intr-o zi vei dori sa folosesti vreun framework css (eu folosesc spre exemplu Skeleton) pentru a realiza site-uri care sa se muleze pe dimensiunea ecranelor care il vor vizita, te vei pomeni (in unele cazuri) ca imaginile nu se micsoreaza pentru a face reflow-ul paginii cat mai usor.
Cu toate acestea, redimensionarea imaginilor (care se afla in containere precum div-uri etc.) se face foarte simplu.
Pentru asta ai nevoie de urmatoarea secventa de css:
Astfel, indiferent de dimensiunea div-ului sau a oricărui alt element care o conţine, imaginea poate fi redimensionată prin urmatorul cod (css):
img.redim
{
max-width: 100%;
height: auto;
width: auto\\9; /* hack pentru ie8 */
}
iar apoi pur si simplu dai clasa imaginilor…
<img src="imaginea.jpg" class="redim" />
