Dažreiz ir nepieciešams ievietot attēlu noteiktā dimensijā. Mēs varam mainīt attēla izmēru, norādot attēla platumu un augstumu. Izplatīts risinājums ir izmantot maksimālais platums: 100%; un augstums: auto; lai lielie attēli nepārsniegtu to konteinera platumu. The maksimālais platums un maksimālais augstums CSS īpašības darbojas labāk, taču tās netiek atbalstītas daudzās pārlūkprogrammās.
Vēl viens veids, kā mainīt attēla izmēru, ir izmantot objektam piemērots īpašība , kas atbilst attēlam. Šis CSS rekvizīts norāda, kā tiek mainīts videoklipa vai attēla izmērs, lai tas ietilptu tā satura lodziņā. Tas nosaka, kā elements iekļaujas konteinerā ar noteiktu platumu un augstumu.
The objektam piemērots Īpašums parasti tiek piemērots attēlam vai video. Šis rekvizīts nosaka, kā elements reaģē uz konteinera platumu un augstumu. Galvenokārt ir piecas vērtības objektam piemērots īpašums, piemēram, aizpildīt, saturēt, vāks, neviens, samazināt, sākotnējais , un tu manto . Šī īpašuma noklusējuma vērtība ir 'aizpildīt' .
Piemērs
Šajā piemērā mēs mainām attēla izmērus, izmantojot maksimālais platums: 100%; un augstums: auto; īpašības.
cell padding div { width: auto; text-align: center; padding: 15px; border: 3px solid red; } img { max-width: 100%; height: auto; } <img src="forest.webp"> Izmēģiniet to tagad Izvade
Piemērs
Šajā piemērā mēs izmantojam objektam piemērots: vāks; īpašums.
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"> Izmēģiniet to tagad Izvade
Iepriekš minētajā piemērā mēs esam izmantojuši piesegt vērtība objektam piemērots īpašums. Līdzīgi kā iepriekš minētajā piemērā, mēs varam izmantot citas vērtības objektam piemērots rekvizītu, lai mainītu attēla izmēru.