Joskus kuva on sovitettava tiettyyn ulottuvuuteen. Voimme muuttaa kuvan kokoa määrittämällä kuvan leveyden ja korkeuden. Yleinen ratkaisu on käyttää suurin leveys: 100 %; ja korkeus: auto; jotta suuret kuvat eivät ylitä säilön leveyttä. The max-leveys ja max -korkeus CSS:n ominaisuudet toimivat paremmin, mutta monet selaimet eivät tue niitä.
Toinen tapa muuttaa kuvan kokoa on käyttää esineeseen sopiva ominaisuus , joka sopii kuvaan. Tämä CSS-ominaisuus määrittää, kuinka videon tai kuvan kokoa muutetaan niin, että se sopii sen sisältölaatikkoon. Se määrittää, kuinka elementti sopii säiliöön määritetyllä leveydellä ja korkeudella.
The esineeseen sopiva ominaisuutta käytetään yleensä kuvaan tai videoon. Tämä ominaisuus määrittää, kuinka elementti reagoi säilön leveyteen ja korkeuteen. Pääasiassa on viisi arvoa esineeseen sopiva omaisuutta kuten täyttää, sisältää, peittää, ei mitään, pienennetty, alkukirjain , ja inherit . Tämän ominaisuuden oletusarvo on 'täyttää' .
Esimerkki
Tässä esimerkissä muutamme kuvan kokoa käyttämällä suurin leveys: 100 %; ja korkeus: auto; ominaisuuksia.
cell padding div { width: auto; text-align: center; padding: 15px; border: 3px solid red; } img { max-width: 100%; height: auto; } <img src="forest.webp"> Testaa nyt Lähtö
Esimerkki
Tässä esimerkissä käytämme esine-sovitus: kansi; omaisuutta.
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"> Testaa nyt Lähtö
Yllä olevassa esimerkissä olemme käyttäneet peite arvo esineeseen sopiva omaisuutta. Kuten yllä olevassa esimerkissä, voimme käyttää muita arvoja esineeseen sopiva -ominaisuutta muuttaaksesi kuvan kokoa.