Niekedy sa vyžaduje, aby sa obrázok zmestil do určitej danej dimenzie. Veľkosť obrázka môžeme zmeniť zadaním šírky a výšky obrázka. Bežným riešením je použitie maximálna šírka: 100 %; a výška: auto; aby veľké obrázky nepresahovali šírku ich kontajnera. The max-šírka a max-výška vlastnosti CSS fungujú lepšie, ale nie sú podporované v mnohých prehliadačoch.
Ďalším spôsobom zmeny veľkosti obrázka je použitie objekt-fit vlastnosť, ktorá sa hodí k obrázku. Táto vlastnosť CSS určuje, ako sa veľkosť videa alebo obrázka prispôsobí poli obsahu. Definuje, ako prvok zapadne do kontajnera so stanovenou šírkou a výškou.
The objekt-fit vlastnosť sa vo všeobecnosti aplikuje na obrázok alebo video. Táto vlastnosť definuje, ako prvok reaguje na šírku a výšku svojho kontajnera. Existuje hlavne päť hodnôt objekt-fit majetok ako napr vyplniť, obsahovať, zakryť, žiadny, zmenšený, iniciál , a dediť . Predvolená hodnota tejto vlastnosti je 'fill' .
Príklad
V tomto príklade meníme veľkosť obrázka pomocou maximálna šírka: 100 %; a výška: auto; vlastnosti.
cell padding div { width: auto; text-align: center; padding: 15px; border: 3px solid red; } img { max-width: 100%; height: auto; } <img src="forest.webp"> Vyskúšajte to Výkon
Príklad
V tomto príklade používame objekt-fit: kryt; nehnuteľnosť.
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"> Vyskúšajte to Výkon
Vo vyššie uvedenom príklade sme použili kryt hodnota objekt-fit nehnuteľnosť. Podobne ako vo vyššie uvedenom príklade môžeme použiť ostatné hodnoty objekt-fit vlastnosť na zmenu veľkosti obrázka.