Ändra storlek på bilder med React

Beskrivning

Det är alltid en bra idé att ha bilder på en webbplats eller webbapplikation eftersom de hjälper till att engagera en användare, men när dessa bilder är så stora att en användare måste bläddra igenom och förvränga hela sidan, uppnår det motsatt effekt.

I den här artikeln kommer vi att lära oss hur du ändrar storlek på bilder med React genom att använda flera möjliga tillvägagångssätt.

Att ändra storlek på bilder i React är mycket likt att ändra storlek på bilder i traditionell HTML eftersom vi använder CSS-stilar (antingen intern, inline eller extern styling) via className eller style attribut. Vi kan också använda height och width attribut på img tagga direkt.

Notera: I React använder vi inte class som vi gör i HTML använder vi istället className, som utför samma funktion som klass och accepterar strängvärden.

Koden skulle i allmänhet se ut ungefär i stil med:

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

Och vår bild skulle se ut så här:

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

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

Notera: vi använde img som väljare kan vi bestämma oss för att ge den en className och använd den som väljare.

Hur man ändrar storlek på en bild med inline-stilar

Vi använde extern styling i föregående exempel, men precis som i traditionell HTML kan vi använda style attribut för att lägga till CSS-stil. De style attributvärde måste vara ett JavaScript-objekt med nyckel-värdepar:

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

Som standard är grundenheten i pixlar, men anta att vi vill använda andra enheter som rem, %, vh, etc. Vi kommer att använda sträng för stilarnas nyckelvärde:

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

Om vi ​​har många bilder som behöver liknande stil och inte vill använda extern stil, kan vi skapa ett objekt för att hålla dessa stilobjekt och sedan lägga till objektet i styles attribut:

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

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

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

Hur man ändrar storlek på en bild med bredd Och höjd attribut

I traditionell HTML är ett sätt att ändra storlek på bilder att använda sig av height och width egendom med img taggen och detta fungerar även med React:

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

Den största nackdelen med denna metod är att pyssel med höjden och bredden tenderar att förvränga bilder, vilket gör att de krymper, sträcker sig eller på annat sätt tappar förhållandet. Detta kan fixas genom att använda object-fit: cover;.

Styla våra bilder

När vi använder height, width, max-height, och andra CSS-egenskaper för att ändra storlek på våra bilder, tenderar de att förvränga dem, vilket gör att de krymper eller sträcker sig.

Det är alltid en bra idé att inkludera object-fit egenskap, som anger hur storleken på en bild ska ändras för att passa dess behållare. Denna egenskap kan acceptera en mängd olika värden som t.ex contain, cover, fill, none och scale-down.

Andra CSS-egenskaper, som t.ex max-width, min-width, max-heightoch min-height, kan definiera de högsta och lägsta värden en bild kan träffa, vilket begränsar förvrängning.

Slutsats

I den här artikeln lärde vi oss hur man ändrar storlek på bilder i React genom att titta på de olika alternativen som är tillgängliga för oss.

Det är dock att föredra att använda CSS-stilar istället för att behöva ställa in fasta attribut till dessa bilder om det inte är absolut nödvändigt när du vill ta emot dessa värden dynamiskt, i vilket fall inline-styling också kan användas.