Kuidas vähendada pilti CSS

Kui tegemist on veebisaidi kujundamisega, on tavaline, et piltide suuruse muutmine, et paigutus õigesti sobiks. Õnneks pakub CSS meile mitmeid võimalusi piltide suuruse vähendamiseks lihtsalt ja tõhusalt. Selles artiklis uurime mõnda tehnikat selle ülesande täitmiseks.

Laiuse atribuudi kasutamine

Üks lihtsamaid viise pildi suuruse vähendamiseks on CSS -i atribuudi laius . See omadus võimaldab teil määratleda pildi laiuse pikslites, protsentides või muudes mõõtühikutes.

Näiteks kui soovite, et pildil oleks pool algset laiust, võite kasutada järgmist koodi:

    < -Kood>

        & Lt; img src = “image.jpg” style = “laius: 50%;” & gt;

    


 Sel moel on pilt, et see hõivataks ainult poole algsest ruumist. 
 Kõrguse atribuudi kasutamine 
 Nii nagu  laius  omadus, saab ka pildi suuruse vähendamiseks kasutada ka omadust  kõrgus . See määratleb pildi kõrguse samamoodi nagu laius  
 omaduse omadus
 Näiteks kui soovite, et pildil oleks ainult 200 pikslit, võite kasutada järgmist koodi: 


    < -Kood>

        & Lt; img src = “image.jpg” style = “kõrgus: 200px;” & gt;

    


 Sel moel on pildi fikseeritud kõrgus 200 pikslit. 
 kasutades maksimaalset omadust 
  max-laiusega  omadus on kasulik, kui soovite piirata pildi maksimaalset suurust, kuid laske sellel reageerida erinevatele seadmetele. 
 Näiteks kui soovite, et pildil oleks maksimaalselt 500 pikslit, võite kasutada järgmist koodi: 


    < -Kood>

        & Lt; img src = “image.jpg” style = “max-laiusega: 500px;” & gt;

    


 Sel moel on pilt maksimaalselt 500 pikslit lai, kuid väiksemate ekraanidega seadmetes võib see olla väiksem. 
 Max-Height omaduse kasutamine 
 Nii nagu  max-width  atribuut, võimaldab atribuut  max-Height  pildi maksimaalset suurust piirata, kuid seekord seoses kõrgusega.>
 Näiteks kui soovite, et pilt oleks maksimaalselt 300 pikslit, võite kasutada järgmist koodi: 


    < -Kood>

        & Lt; img src = “image.jpg” style = “max-height: 300px;” & gt;

    


 Sel moel on pildil maksimaalselt 300 pikslit, kuid väiksemate ekraanidega seadmetel võib see olla väiksem. 
 Järeldus 
 CSS-pildi suuruse vähendamine on lihtne ülesanne ja seda saab teha selliste omaduste abil nagu  laius ,  kõrgus ,  max-laiusega  ja  max-height . Need atribuudid võimaldavad teil pilte muuta vastavalt oma veebisaidi paigutuse vajadustele, tagades kasutajatele meeldiva visuaalse kogemuse. 
 Proovige neid tehnikaid oma projektides ja nautige oma veebisaidil hästi kohandatud piltide olemasolu eeliseid!