Kartais reikia, kad vaizdas būtų pritaikytas tam tikram matmeniui. Vaizdo dydį galime pakeisti nurodydami vaizdo plotį ir aukštį. Dažnas sprendimas yra naudoti maksimalus plotis: 100%; ir aukštis: automatinis; kad dideli vaizdai neviršytų jų talpyklos pločio. The maksimalus plotis ir maksimalus aukštis CSS savybės veikia geriau, tačiau jos nepalaikomos daugelyje naršyklių.
Kitas būdas pakeisti vaizdo dydį yra naudoti tinkamas objektui savybė , kuri atitinka vaizdą. Ši CSS ypatybė nurodo, kaip vaizdo įrašo arba vaizdo dydis keičiamas, kad tilptų į jo turinio laukelį. Jis apibrėžia, kaip elementas telpa į konteinerį su nustatytu pločiu ir aukščiu.
The tinkamas objektui ypatybė paprastai taikoma vaizdui ar vaizdo įrašui. Ši savybė apibrėžia, kaip elementas reaguoja į jo talpyklos plotį ir aukštį. Dažniausiai yra penkios vertės tinkamas objektui turtas, pvz užpildyti, turėti, padengti, nėra, sumažinimas, pradinis , ir paveldėti . Numatytoji šios nuosavybės vertė yra 'užpildyti' .
Pavyzdys
Šiame pavyzdyje mes keičiame vaizdo dydį naudodami maksimalus plotis: 100%; ir aukštis: automatinis; savybių.
isempty java
cell padding div { width: auto; text-align: center; padding: 15px; border: 3px solid red; } img { max-width: 100%; height: auto; } <img src="forest.webp"> Išbandykite dabar Išvestis
Pavyzdys
Šiame pavyzdyje mes naudojame tinkamas objektui: dangtelis; nuosavybė.
Zeenat Aman aktorius
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"> Išbandykite dabar Išvestis
Aukščiau pateiktame pavyzdyje mes panaudojome viršelis vertė tinkamas objektui nuosavybė. Panašiai kaip aukščiau pateiktame pavyzdyje, galime naudoti kitas reikšmes tinkamas objektui savybę, kad pakeistumėte vaizdo dydį.