Endre størrelse på bilder med React

Introduksjon

Det er alltid en god idé å ha visuelle elementer på en nettside eller nettapplikasjon fordi de hjelper til med å engasjere en bruker, men når disse bildene er så store at en bruker må bla gjennom, og forvrenger hele siden, oppnår det motsatt effekt.

I denne artikkelen vil vi lære hvordan du endrer størrelse på bilder med React ved å bruke flere mulige tilnærminger.

Endre størrelse på bilder i React ligner veldig på å endre størrelse på bilder i tradisjonell HTML fordi vi bruker CSS-stiler (enten intern, innebygd eller ekstern styling) via className eller style Egenskap. Vi kan også bruke height og width attributter på img merke direkte.

OBS: I React bruker vi ikke class som vi gjør i HTML, bruker vi i stedet className, som utfører samme funksjon som klasse og aksepterer strengverdier.

Koden vil generelt se noe i retning av:

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

Og bildet vårt vil se slik ut:

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

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

OBS: vi brukte img som velger kan vi bestemme oss for å gi den en className og bruk den som velger.

Hvordan endre størrelse på et bilde med innebygde stiler

Vi brukte ekstern styling i forrige eksempel, men akkurat som i tradisjonell HTML, kan vi bruke style attributt for å legge til CSS-stil. De style attributtverdien må være et JavaScript-objekt med nøkkelverdi-par:

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 er grunnenheten i piksler, men anta at vi ønsker å bruke andre enheter som rem, %, vh, osv. Vi vil bruke streng for stilenes nøkkelverdi:

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

Hvis vi har mange bilder som trenger lignende stil og ikke ønsker å bruke ekstern styling, kan vi lage et objekt for å holde disse stilobjektene og deretter legge til objektet i styles Egenskap:

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

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

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

Hvordan endre størrelse på et bilde med bredde Og høyde attributter

I tradisjonell HTML er en måte å endre størrelse på bilder på å bruke height og width eiendom med img tag og dette fungerer også 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ørste ulempen med denne metoden er at å fikle med høyden og bredden har en tendens til å forvrenge bildene, noe som får dem til å krympe, strekke seg eller på annen måte miste forholdet. Dette kan fikses ved å bruke object-fit: cover;.

Styling av bildene våre

Når vi bruker height, width, max-height, og andre CSS-egenskaper for å endre størrelsen på bildene våre, har de en tendens til å forvrenge dem, slik at de krymper eller strekker seg.

Det er alltid en god idé å inkludere object-fit egenskap, som spesifiserer hvordan et bilde skal endres for å passe til beholderen. Denne egenskapen kan akseptere en rekke verdier som f.eks contain, cover, fill, none og scale-down.

Andre CSS-egenskaper, som f.eks max-width, min-width, max-heightog min-height, kan definere maksimums- og minimumsverdiene et bilde kan treffe, noe som begrenser forvrengning.

konklusjonen

I denne artikkelen lærte vi hvordan du endrer størrelse på bilder i React ved å se på de ulike alternativene som er tilgjengelige for oss.

Det er imidlertid å foretrekke å bruke CSS-stiler i stedet for å måtte sette faste attributter til disse bildene med mindre det er absolutt nødvendig når du ønsker å motta disse verdiene dynamisk, i så fall kan inline styling også brukes.