Uneori, este necesar să se potrivească o imagine într-o anumită dimensiune dată. Putem redimensiona imaginea specificând lățimea și înălțimea unei imagini. O soluție comună este utilizarea latime maxima: 100%; și inaltime: auto; astfel încât imaginile mari să nu depășească lățimea recipientului lor. The lățimea maximă și inaltime maxima proprietățile CSS funcționează mai bine, dar nu sunt acceptate în multe browsere.

Un alt mod de a redimensiona imaginea este folosirea potrivire obiect proprietate , care se potrivește cu imaginea. Această proprietate CSS specifică modul în care un videoclip sau o imagine este redimensionat pentru a se potrivi cu caseta de conținut. Acesta definește modul în care un element se potrivește în container cu o lățime și o înălțime stabilite.

The potrivire obiect proprietatea se aplică, în general, imaginilor sau videoclipurilor. Această proprietate definește modul în care un element răspunde la lățimea și înălțimea containerului său. În principal, există cinci valori ale potrivire obiect proprietate precum umple, conține, acoperă, niciunul, reducere, inițială , și moștenești . Valoarea implicită a acestei proprietăți este 'completati' .

Exemplu

În acest exemplu, redimensionăm imaginea utilizând latime maxima: 100%; și inaltime: auto; proprietăți.

 cell padding div { width: auto; text-align: center; padding: 15px; border: 3px solid red; } img { max-width: 100%; height: auto; } <img src="forest.webp"> 

Ieșire

Exemplu

În acest exemplu, folosim potrivire obiect: acoperire; proprietate.

 div { width: 300px; height: auto; text-align: center; padding: 15px; border: 3px solid red; } img { object-fit: cover; } <img src="forest.webp" width="300" height="300"> 

Ieșire

În exemplul de mai sus, am folosit acoperi valoarea a potrivire obiect proprietate. Similar cu exemplul de mai sus, putem folosi celelalte valori ale potrivire obiect proprietate pentru a redimensiona imaginea.