Néha egy képet egy adott dimenzióba kell illeszteni. A képet átméretezhetjük a kép szélességének és magasságának megadásával. Gyakori megoldás a maximális szélesség: 100%; és magasság: auto; hogy a nagy képek ne haladják meg a tárolójuk szélességét. A max szélesség és maximum magasság A CSS tulajdonságai jobban működnek, de sok böngésző nem támogatja őket.

A kép átméretezésének másik módja a tárgyhoz illő tulajdonság , ami illik a képhez. Ez a CSS-tulajdonság határozza meg, hogy a videó vagy a kép hogyan méretezhető át a tartalomdobozhoz. Meghatározza, hogy egy elem hogyan illeszkedik a konténerbe meghatározott szélességgel és magassággal.

A tárgyhoz illő tulajdonság általában képre vagy videóra vonatkozik. Ez a tulajdonság határozza meg, hogyan reagál egy elem a tároló szélességére és magasságára. Főleg öt értéke van tárgyhoz illő ingatlan, mint pl kitölt, tartalmaz, fed, nincs, kicsinyítés, kezdeti , és örököl . Ennek a tulajdonságnak az alapértelmezett értéke 'tölt' .

Példa

Ebben a példában átméretezzük a képet a maximális szélesség: 100%; és magasság: auto; tulajdonságait.

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

Kimenet

Példa

Ebben a példában a tárgy-illesztés: borító; ingatlan.

 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"> 

Kimenet

A fenti példában a borító értéke a tárgyhoz illő ingatlan. A fenti példához hasonlóan használhatjuk a többi értéket is tárgyhoz illő tulajdonságot a kép átméretezéséhez.