Piltide suuruse muutmine rakendusega React

Sissejuhatus

Veebisaidil või veebirakenduses on alati hea visuaalid, kuna need aitavad kasutajat kaasata, kuid kui need pildid on nii suured, et kasutaja peab läbi kerima, moonutades kogu lehte, saavutab see vastupidise efekti.

Sellest artiklist õpime, kuidas Reactiga piltide suurust muuta, kasutades mitmeid võimalikke lähenemisviise.

Piltide suuruse muutmine Reactis on väga sarnane traditsioonilise HTML-i piltide suuruse muutmisega, kuna kasutame CSS-i stiile (kas sisemist, tekstisisest või välist stiili) className või style atribuut. Saame kasutada ka height ja width atribuudid peal img märgi otse.

Märge: Reactis me ei kasuta class nagu HTML-is, kasutame selle asemel className, mis täidab sama funktsiooni kui klass ja aktsepteerib stringiväärtusi.

Kood näeks üldiselt välja midagi sellist:

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

Ja meie pilt näeks välja selline:

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

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

Märge: me kasutasime img valijana võime otsustada anda sellele a className ja kasutage seda valijana.

Kuidas muuta pildi suurust tekstisiseste stiilide abil

Eelmises näites kasutasime välist stiili, kuid nagu traditsioonilises HTML-is, saame kasutada ka style atribuut CSS-stiili lisamiseks. The style atribuudi väärtus peab olema võtme-väärtuste paaridega JavaScripti objekt:

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

Vaikimisi on põhiühik pikslites, kuid oletame, et tahame kasutada muid ühikuid nagu rem, %, vhjne. Kasutame stiilide võtmeväärtuse jaoks stringi:

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

Kui meil on palju pilte, mis vajavad sarnast stiili ja me ei soovi kasutada välist stiili, võiksime luua objekti nende stiiliobjektide hoidmiseks ja seejärel lisada objekti styles atribuut:

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

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

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

Kuidas muuta pildi suurust rakendusega laius And kõrgus Näitajad

Traditsioonilises HTML-is on üks piltide suuruse muutmise viise kasutada height ja width vara koos img silt ja see töötab ka Reactiga:

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

Selle meetodi peamiseks puuduseks on see, et kõrguse ja laiusega sebimine kipub pilte moonutama, muutes need kokkutõmbumiseks, venimiseks või muul viisil oma suhte kaotamiseks. Seda saab parandada kasutades object-fit: cover;.

Meie piltide kujundamine

Kui me kasutame height, width, max-heightja muud CSS-i atribuudid meie piltide suuruse muutmiseks, kipuvad need neid moonutama, muutes need kokkutõmbumiseks või venimiseks.

Alati on hea mõte lisada object-fit atribuut, mis määrab, kuidas tuleks pildi suurust konteinerisse mahutamiseks muuta. See majutusasutus võib aktsepteerida mitmesuguseid väärtusi, näiteks contain, cover, fill, none ja scale-down.

Muud CSS-i omadused, nt max-width, min-width, max-heightja min-height, saab määrata maksimaalse ja minimaalse väärtuse, mida pilt võib tabada, piirates moonutusi.

Järeldus

Selles artiklis õppisime, kuidas Reactis piltide suurust muuta, vaadates erinevaid meile saadaolevaid valikuid.

Siiski on parem kasutada CSS-i stiile, selle asemel, et nendele piltidele fikseeritud atribuute seada, välja arvatud juhul, kui see on absoluutselt vajalik, kui soovite neid väärtusi dünaamiliselt vastu võtta. Sel juhul saab kasutada ka tekstisisest stiili.