Ridimensionare le immagini con React

Introduzione

È sempre una buona idea avere elementi visivi su un sito Web o un'applicazione Web perché aiutano a coinvolgere un utente, ma quando queste immagini sono così grandi che un utente deve scorrere, distorcendo l'intera pagina, si ottiene l'effetto opposto.

In questo articolo impareremo come ridimensionare le immagini con React utilizzando diversi approcci possibili.

Il ridimensionamento delle immagini in React è molto simile al ridimensionamento delle immagini nell'HTML tradizionale perché utilizziamo gli stili CSS (stile interno, in linea o esterno) tramite className oppure style attributo. Possiamo anche usare il height ed width attributi sul img tagga direttamente.

Nota: In React, non utilizziamo class come facciamo in HTML, invece, utilizziamo className, che svolge la stessa funzione di classe e accetta valori di stringa.

Il codice generalmente assomiglierebbe a qualcosa sulla falsariga di:

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

E la nostra immagine sarebbe simile a questa:

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

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

Nota: abbiamo usato img come selettore, possiamo decidere di dargli a className e usalo come selettore.

Come ridimensionare un'immagine con stili in linea

Abbiamo usato lo stile esterno nell'esempio precedente, ma proprio come nell'HTML tradizionale, possiamo usare il style attributo per aggiungere uno stile CSS. Il style il valore dell'attributo deve essere un oggetto JavaScript con coppie chiave-valore:

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

Per impostazione predefinita, l'unità di base è in pixel, ma supponiamo di voler utilizzare altre unità come rem, %, vh, ecc. Useremo string per il valore chiave degli stili:

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

Se abbiamo molte immagini che necessitano di uno stile simile e non vogliamo usare uno stile esterno, potremmo creare un oggetto per contenere questi oggetti di stile e quindi aggiungere l'oggetto al styles attributo:

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

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

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

Come ridimensionare un'immagine con larghezza E altre ancora… altezza attributi

Nell'HTML tradizionale, un modo per ridimensionare le immagini è utilizzare il file height ed width proprietà con il img tag e questo funziona anche con 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>
   );
};

Lo svantaggio principale di questo metodo è che giocherellare con l'altezza e la larghezza tende a distorcere le immagini, facendole restringere, allungare o altrimenti perdere il loro rapporto. Questo può essere risolto utilizzando object-fit: cover;.

Stile delle nostre immagini

Quando usiamo il height, width, max-heighte altre proprietà CSS per ridimensionare le nostre immagini, tendono a distorcerle, facendole restringere o allungare.

È sempre una buona idea includere il object-fit proprietà, che specifica come ridimensionare un'immagine per adattarla al suo contenitore. Questa proprietà può accettare una varietà di valori come contain, cover, fill, none ed scale-down.

Altre proprietà CSS, come max-width, min-width, max-heighte min-height, può definire i valori massimo e minimo che un'immagine può raggiungere, limitando la distorsione.

Conclusione

In questo articolo, abbiamo imparato come ridimensionare le immagini in React esaminando le varie opzioni a nostra disposizione.

Tuttavia, è preferibile utilizzare gli stili CSS piuttosto che dover impostare attributi fissi su queste immagini a meno che non sia assolutamente necessario quando si desidera ricevere questi valori in modo dinamico, nel qual caso è possibile utilizzare anche lo stile inline.