Deseori, este nevoie să afișați imagini într-un bloc de dimensiune fixă. În acest caz, există o problemă: cum să potriviți o imagine într-un bloc fără a pierde raportul de aspect.
Esența acestei metode este aceea că imaginea va fi înscrisă într-un bloc de anumite dimensiuni. Orice lucru care nu se încadrează în acest bloc va fi ascuns. Blocul de încadrare va avea aceleași proprietăți ca imaginea. Prin urmare, poate fi poziționat și aliniat în același mod ca o imagine obișnuită. Opțiunea, desigur, nu este ideală, ci eficace.
În primul rând, vom selecta pacienții. Am făcut poze cu trei animale din familia felinelor de diferite proporții. Lățimea tuturor imaginilor este de 200 pixeli.
Cu o astfel de diferență în proporțiile de imagini, cea mai bună opțiune ar fi să ia un bloc de încadrare cu o dimensiune de 200x120 pixeli.
După toate manipulările cu CSS, acesta va arăta astfel:
Codul pentru acest exemplu este:
După cum puteți vedea, imaginile nu sunt distorsionate, ci doar decupate. Deși, de fapt, au rămas la maxim. Această metodă va fi foarte reușită dacă diferența dintre proporțiile imaginilor dvs. nu este mare.
Asta e tot. Abonați, puneți asteriscuri! Mult noroc în realizările tale!