Kuvien koon muuttaminen Reactilla

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, %, vhjne. 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:

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-heightja 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ä.