Nola murriztu irudiaren tamaina CSS

Webgunearen diseinua lortzeko orduan, garrantzitsua da irudien tamaina kontrolatzen jakitea erabiltzaile esperientzia atsegina ziurtatzeko. Artikulu honetan, irudiaren tamaina nola murriztu CSS erabiliz aztertuko dugu.

“zabalera” propietatea erabiltzea

Irudiaren tamaina murrizteko modu erraza CSS-en “zabalera” erabiltzea da. Jabetza honek irudiaren zabalera pixeletan, portzentajea edo neurketa unitate unitateetan definitzeko aukera ematen du.

Adibidez, irudiaren tamaina jatorrizko tamainaren% 50era murriztu nahi baduzu, CSS kodea erabil dezakezu:

Img {
Zabalera:% 50;
}}

Honek irudia jatorrizko tamainaren erdia bistaratuko du.

“Altuera” propietatea erabiliz

Jabetza “zabalera” izateaz gain, “Altuera” propietatea ere erabil dezakezu irudiaren altuera kontrolatzeko. Jabetza “zabalera” gisa, altuera pixeletan, portzentajean edo neurri unitateetan defini dezakezu.

Adibidez, irudiaren tamaina 200 pixelera murriztu nahi baduzu, CSS kodea erabil dezakezu:

Img {
Altuera: 200px;
}}

Honek irudia 200 pixeleko altuera finkoarekin bistaratzea eragingo du.

“Max-zabalera” propietatea erabiltzea

Irudiaren tamaina txikitzeko beste modu bat “Max-zabalera” jabetza erabiltzea da. Jabetza honek irudiaren gehienezko zabalera definitzeko aukera ematen du, balio hori gainditzen ez duela ziurtatuz.

Adibidez, irudiak gehienez 500 pixel zabal dituela nahi baduzu, honako CSS kodea erabil dezakezu:

Img {
Max-zabalera: 500px;
}}

Honek irudia proportzionalki tamaintzea eragingo du gehienez 500 pixeleko zabalera batean.

“altuera maximoa” erabiltzea

“Max-zabalera” jabetza bezala, “altuera maximoa” propietatea ere erabil dezakezu irudiaren gehienezko altuera definitzeko.

Adibidez, irudia gehienez 300 pixel izan nahi baduzu, CSS kodea erabil dezakezu:

Img {
Altuera maximoa: 300px;
}}

Honek irudia proportzionalki tamaina handitzea eragingo du gehienez 300 pixeleko altuera batean.

Ondorioa

Irudiaren tamaina CSS-n murriztea zeregin erraza baina garrantzitsua da, diseinu sentikorra eta erabiltzaile esperientzia ona bermatzeko. “Zabalera”, “altuera”, “altuera”, “altuera” eta “altuera”, irudien tamaina erraz kontrolatu dezakezu zure webgunean.

Saiatu teknika hauek zure hurrengo proiektuan eta ikusi nola hobetu dezaketen zure webgunearen itxura eta errendimendua.