Képek átméretezése a React segítségével

Bevezetés

Mindig jó ötlet, ha vizuális elemeket helyeznek el egy webhelyen vagy webes alkalmazásban, mert segítik a felhasználó elköteleződését, de ha ezek a képek olyan nagyok, hogy a felhasználónak végig kell görgetnie, eltorzítva az egész oldalt, akkor az ellenkező hatást éri el.

Ebben a cikkben megtudjuk, hogyan lehet átméretezni a képeket a React segítségével számos lehetséges megközelítés használatával.

A képek átméretezése a Reactban nagyon hasonlít a hagyományos HTML-ben lévő képek átméretezéséhez, mivel CSS-stílusokat használunk (belső, beépített vagy külső stílust) className vagy a style tulajdonság. Használhatjuk azt is height és a width attribútumok a img címke közvetlenül.

Jegyzet: A Reactban nem használjuk class mint a HTML-ben, ehelyett használjuk className, amely ugyanazt a funkciót látja el, mint osztály és elfogadja a karakterlánc-értékeket.

A kód általában a következőképpen néz ki:

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

A képünk pedig így nézne ki:

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

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

Jegyzet: használtuk img választóként dönthetünk úgy, hogy a className és használja kiválasztóként.

Kép átméretezése soron belüli stílusokkal

Az előző példában külső stílust használtunk, de a hagyományos HTML-hez hasonlóan használhatjuk a style attribútumot a CSS-stílus hozzáadásához. A style Az attribútum értékének JavaScript objektumnak kell lennie kulcs-érték párokkal:

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

Alapértelmezés szerint az alapegység pixelben van megadva, de tegyük fel, hogy más mértékegységeket is szeretnénk használni, mint pl rem, %, vhstb. A karakterláncot használjuk a stílusok kulcsértékéhez:

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

Ha sok olyan képünk van, amelyhez hasonló stílusra van szükség, és nem szeretnénk külső stílust használni, létrehozhatunk egy objektumot ezeknek a stílusobjektumoknak a tárolására, majd hozzáadhatjuk az objektumot a styles tulajdonság:

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

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

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

Hogyan lehet átméretezni egy képet a szélesség És magasság Attribútumok

A hagyományos HTML-ben a képek átméretezésének egyik módja a height és a width ingatlan a img címke, és ez a React-tal is működik:

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

Ennek a módszernek az a fő hátránya, hogy a magassággal és szélességgel való babrálás hajlamos a képek torzulására, így azok összezsugorodnak, megnyúlnak vagy más módon elvesztik arányukat. Ez használatával javítható object-fit: cover;.

Képeink stílusa

Amikor használjuk a height, width, max-height, és más CSS-tulajdonságok átméretezhetik képeinket, hajlamosak eltorzítani azokat, így összezsugorodnak vagy megnyúlnak.

Mindig jó ötlet szerepeltetni a object-fit tulajdonság, amely meghatározza, hogy egy képet hogyan kell átméretezni, hogy illeszkedjen a tárolójához. Ez a tulajdonság sokféle értéket fogadhat el, mint pl contain, cover, fill, none és a scale-down.

Egyéb CSS-tulajdonságok, mint pl max-width, min-width, max-heightés min-height, meghatározhatja, hogy egy kép mekkora maximális és minimális értéket érhet el, korlátozva a torzítást.

Következtetés

Ebben a cikkben megtanultuk, hogyan lehet átméretezni a képeket a React alkalmazásban a rendelkezésünkre álló különféle lehetőségek alapján.

Mindazonáltal célszerűbb CSS-stílusokat használni ahelyett, hogy rögzített attribútumokat kellene beállítani ezekhez a képekhez, hacsak nem feltétlenül szükséges, ha dinamikusan szeretné megkapni ezeket az értékeket. Ebben az esetben a soron belüli stílus is használható.