Spreminjanje velikosti slik z React

Predstavitev

Vedno je dobra ideja imeti vizualne elemente na spletnem mestu ali spletni aplikaciji, ker pomagajo pritegniti uporabnika, toda ko so te slike tako velike, da se mora uporabnik pomikati po njih, kar popači celotno stran, doseže nasprotni učinek.

V tem članku se bomo naučili, kako spremeniti velikost slik z Reactom z uporabo več možnih pristopov.

Spreminjanje velikosti slik v Reactu je zelo podobno spreminjanju velikosti slik v tradicionalnem HTML-ju, ker uporabljamo sloge CSS (bodisi interne, v vrstici ali zunanje stile) prek className ali style atribut. Uporabimo lahko tudi height in width atributi na img neposredno označite.

Opomba: V Reactu ne uporabljamo class namesto tega kot v HTML-ju uporabljamo className, ki opravlja isto funkcijo kot razred in sprejema nizovne vrednosti.

Koda bi na splošno izgledala nekako takole:

<!-- index.css -->
img {
   width: 500px;
   height: 600px;
}

In naša slika bi izgledala takole:

<!-- App.js -->
import Logo from './images/react-logo.png';
import './index.css';

const App = () => {
   return (
      <div>
         <img src={Logo} alt="React Logo" />
      </div>
   );
};

Opomba: smo uporabili img se lahko kot selektor odločimo, da ga a className in ga uporabite kot selektorja.

Kako spremeniti velikost slike z vstavljenimi slogi

V prejšnjem primeru smo uporabili zunanji slog, vendar tako kot v tradicionalnem HTML-ju lahko uporabimo style atribut za dodajanje sloga CSS. The style vrednost atributa mora biti objekt JavaScript s pari ključ-vrednost:

import Logo from './images/react-logo.png';
const App = () => {
   return (
      <div>
         <img style={{ width: 500, height: 600 }} src={Logo} alt="React Logo" />
      </div>
   );
};

Privzeto je osnovna enota v slikovnih pikah, vendar predpostavimo, da želimo uporabiti druge enote, kot je rem, %, vh, itd. Za ključno vrednost slogov bomo uporabili niz:

import Logo from './images/react-logo.png';
const App = () => {
   return (
      <div>
         <img style={{ width: "500%", height: "600%" }} src={Logo} alt="React Logo" />
      </div>
   );
};

Če imamo veliko slik, ki potrebujejo podoben stil in ne želimo uporabljati zunanjega sloga, lahko ustvarimo predmet, ki bo vseboval te objekte slogov, nato pa objekt dodamo v styles atribut:

import Logo from './images/react-logo.png';

const App = () => {
   const myImageStyle = { width: '500px', height: '600px' };

   return (
      <div>
         <img style={myImageStyle} src={Logo} alt="" />
      </div>
   );
};

Kako spremeniti velikost slike z širina in višina Lastnosti

V tradicionalnem HTML-ju je eden od načinov za spreminjanje velikosti slik uporaba height in width premoženje z img in to deluje tudi z Reactom:

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>
   );
};

Glavna pomanjkljivost te metode je, da lahko igranje z višino in širino popači slike, zaradi česar se skrčijo, raztegnejo ali kako drugače izgubijo svoje razmerje. To je mogoče popraviti z uporabo object-fit: cover;.

Oblikovanje naših slik

Ko uporabljamo height, width, max-heightin druge lastnosti CSS za spreminjanje velikosti naših slik, jih ponavadi popačijo, zaradi česar se skrčijo ali raztegnejo.

Vedno je dobro vključiti object-fit lastnost, ki določa, kako naj se slika spremeni v velikost, da se prilega njenemu vsebniku. Ta lastnost lahko sprejme različne vrednosti, kot npr contain, cover, fill, none in scale-down.

Druge lastnosti CSS, kot npr max-width, min-width, max-heightin min-height, lahko določi največje in najmanjše vrednosti, ki jih lahko doseže slika, in tako omeji popačenje.

zaključek

V tem članku smo se naučili spreminjati velikost slik v Reactu, tako da smo si ogledali različne možnosti, ki so nam na voljo.

Vendar je bolje uporabiti sloge CSS, namesto da bi tem slikam morali nastavljati fiksne atribute, razen če je to nujno potrebno, ko želite te vrednosti prejeti dinamično; v tem primeru je mogoče uporabiti tudi stilsko oblikovanje v vrstici.