esittely
On aina hyvä idea, että verkkosivustolla tai verkkosovelluksessa on visuaalisia materiaaleja, koska ne auttavat aktivoimaan käyttäjän, mutta kun nämä kuvat ovat niin suuria, että käyttäjän on vieritettävä läpi koko sivua vääristämällä, saavutetaan päinvastainen vaikutus.
Tässä artikkelissa opimme kuinka muuttaa kuvien kokoa Reactilla käyttämällä useita mahdollisia lähestymistapoja.
Kuvien koon muuttaminen Reactissa on hyvin samanlaista kuin kuvien koon muuttaminen perinteisessä HTML:ssä, koska käytämme CSS-tyylejä (joko sisäistä, sisäistä tai ulkoista tyyliä) className
tai style
attribuutti. Voimme myös käyttää height
ja width
attribuutteja img
tunniste suoraan.
Huomautus: Reactissa emme käytä class
kuten HTML:ssä, käytämme sen sijaan className
, joka suorittaa saman toiminnon kuin luokka ja hyväksyy merkkijonoarvot.
Koodi näyttää yleensä joltain seuraavanlaiselta:
<!-- index.css -->
img {
width: 500px;
height: 600px;
}
Ja kuvamme näyttäisi tältä:
<!-- App.js -->
import Logo from './images/react-logo.png';
import './index.css';
const App = () => {
return (
<div>
<img src={Logo} alt="React Logo" />
</div>
);
};
Huomautus: me käytimme img
valitsijana voimme päättää antaa sille a className
ja käytä sitä valitsimena.
Kuvan koon muuttaminen upotetuilla tyyleillä
Edellisessä esimerkissä käytimme ulkoista tyyliä, mutta kuten perinteisessä HTML:ssä, voimme käyttää style
attribuutti lisätäksesi CSS-tyyliä. The style
attribuutin arvon on oltava JavaScript-objekti, jossa on avain-arvo-pareja:
import Logo from './images/react-logo.png';
const App = () => {
return (
<div>
<img style={{ width: 500, height: 600 }} src={Logo} alt="React Logo" />
</div>
);
};
Oletuksena perusyksikkö on pikseleinä, mutta oletetaan, että haluamme käyttää muita yksiköitä, kuten rem
, %
, vh
jne. Käytämme merkkijonoa tyylien avainarvona:
import Logo from './images/react-logo.png';
const App = () => {
return (
<div>
<img style={{ width: "500%", height: "600%" }} src={Logo} alt="React Logo" />
</div>
);
};
Jos meillä on monia kuvia, jotka tarvitsevat samanlaista tyyliä, emmekä halua käyttää ulkoista tyyliä, voimme luoda objektin näiden tyyliobjektien säilyttämiseksi ja lisätä objektin sitten styles
määrite:
import Logo from './images/react-logo.png';
const App = () => {
const myImageStyle = { width: '500px', height: '600px' };
return (
<div>
<img style={myImageStyle} src={Logo} alt="" />
</div>
);
};
Kuinka muuttaa kuvan kokoa leveys Ja korkeus Ominaisuudet
Perinteisessä HTML:ssä yksi tapa muuttaa kuvien kokoa on käyttää height
ja width
omaisuutta img
tag ja tämä toimii myös Reactin kanssa:
Tutustu käytännönläheiseen, käytännölliseen Gitin oppimisoppaaseemme, jossa on parhaat käytännöt, alan hyväksymät standardit ja mukana tuleva huijauslehti. Lopeta Git-komentojen googlailu ja oikeastaan oppia se!
import Logo from './images/react-logo.png';
const App = () => {
return (
<div>
<img src={Logo} width="500" height="600" alt="" />
<img src={Logo} width={500} height={600} alt="" />
</div>
);
};
Tämän menetelmän suurin haittapuoli on, että korkeuden ja leveyden näppäileminen pyrkii vääristämään kuvia, jolloin ne kutistuvat, venyvät tai muutoin menettävät suhteensa. Tämä voidaan korjata käyttämällä object-fit: cover;
.
Kuvien muotoilu
Kun käytämme height
, width
, max-height
, ja muut CSS-ominaisuudet muuttaa kuviemme kokoa, ne yleensä vääristävät niitä, jolloin ne kutistuvat tai venyvät.
On aina hyvä idea sisällyttää object-fit
ominaisuus, joka määrittää, kuinka kuvan kokoa tulee muuttaa sopimaan sen säilöön. Tämä ominaisuus voi hyväksyä useita arvoja, kuten contain
, cover
, fill
, none
ja scale-down
.
Muut CSS-ominaisuudet, kuten max-width
, min-width
, max-height
ja min-height
, voi määrittää enimmäis- ja vähimmäisarvot, joihin kuva voi osua, mikä rajoittaa vääristymistä.
Yhteenveto
Tässä artikkelissa opimme kuinka muuttaa kuvien kokoa Reactissa tarkastelemalla käytettävissämme olevia vaihtoehtoja.
On kuitenkin parempi käyttää CSS-tyylejä kuin asettaa näille kuville kiinteitä attribuutteja, ellei se ole ehdottoman välttämätöntä, kun haluat vastaanottaa nämä arvot dynaamisesti, jolloin voidaan käyttää myös inline-tyyliä.