Redimensionarea imaginilor cu React

Introducere

Este întotdeauna o idee bună să aveți imagini pe un site web sau pe o aplicație web, deoarece ajută la implicarea unui utilizator, dar atunci când aceste imagini sunt atât de mari încât un utilizator trebuie să deruleze, distorsionând întreaga pagină, se obține efectul opus.

În acest articol, vom învăța cum să redimensionăm imaginile cu React utilizând mai multe abordări posibile.

Redimensionarea imaginilor în React este foarte asemănătoare cu redimensionarea imaginilor în HTML tradițional, deoarece folosim stiluri CSS (fie interne, inline sau externe) prin className sau style atribut. Putem folosi și height și width atribute pe img etichetați direct.

Notă: În React, nu folosim class așa cum facem în HTML, în schimb, folosim className, care îndeplinește aceeași funcție ca clasă și acceptă valori de șir.

Codul ar arăta în general ceva de genul:

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

Și imaginea noastră ar arăta astfel:

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

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

Notă: noi am folosit img ca selector, putem decide să îi dăm a className și folosiți-l ca selector.

Cum să redimensionați o imagine cu stiluri inline

Am folosit stilul extern în exemplul anterior, dar la fel ca în HTML tradițional, putem folosi style atribut pentru a adăuga stilul CSS. The style valoarea atributului trebuie să fie un obiect JavaScript cu perechi cheie-valoare:

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

În mod implicit, unitatea de bază este în pixeli, dar să presupunem că vrem să folosim alte unități precum rem, %, vh, etc. Vom folosi șir pentru valoarea cheie a stilurilor:

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

Dacă avem multe imagini care au nevoie de un stil similar și nu dorim să folosim un stil extern, am putea crea un obiect care să țină aceste obiecte de stil și apoi să adăugăm obiectul la 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>
   );
};

Cum să redimensionezi o imagine cu lățime Și înălțime atribute

În HTML tradițional, o modalitate de a redimensiona imagini este să utilizați height și width proprietate cu img tag și aceasta funcționează și cu 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>
   );
};

Principalul dezavantaj al acestei metode este că jocul cu înălțimea și lățimea tinde să distorsioneze imaginile, făcându-le să se micșoreze, să se întindă sau să își piardă în alt mod raportul. Acest lucru poate fi rezolvat prin utilizarea object-fit: cover;.

Stilizarea imaginilor noastre

Când folosim funcția height, width, max-height, și alte proprietăți CSS pentru a ne redimensiona imaginile, acestea tind să le distorsioneze, făcându-le să se micșoreze sau să se întindă.

Este întotdeauna o idee bună să includeți object-fit proprietate, care specifică modul în care o imagine ar trebui să fie redimensionată pentru a se potrivi cu containerul său. Această proprietate poate accepta o varietate de valori, cum ar fi contain, cover, fill, none și scale-down.

Alte proprietăți CSS, cum ar fi max-width, min-width, max-height, și min-height, poate defini valorile maxime și minime pe care le poate atinge o imagine, limitând distorsiunea.

Concluzie

În acest articol, am învățat cum să redimensionăm imaginile în React analizând diferitele opțiuni disponibile pentru noi.

Cu toate acestea, este de preferat să folosiți stiluri CSS în loc să setați atribute fixe pentru aceste imagini, cu excepția cazului în care este absolut necesar atunci când doriți să primiți aceste valori în mod dinamic, caz în care poate fi folosit și stilul inline.