Het formaat van afbeeldingen wijzigen met React

Introductie

Het is altijd een goed idee om afbeeldingen op een website of webtoepassing te hebben, omdat ze een gebruiker helpen te binden, maar wanneer deze afbeeldingen zo groot zijn dat een gebruiker er doorheen moet scrollen, waardoor de hele pagina wordt vervormd, wordt het tegenovergestelde effect bereikt.

In dit artikel zullen we leren hoe je afbeeldingen kunt verkleinen met React door verschillende mogelijke benaderingen te gebruiken.

Het formaat van afbeeldingen in React lijkt erg op het formaat van afbeeldingen in traditionele HTML, omdat we CSS-stijlen gebruiken (interne, inline of externe styling) via className of de style attribuut. We kunnen ook de height en width attributen op de img direct taggen.

Opmerking: In React gebruiken we geen class zoals we doen in HTML, in plaats daarvan gebruiken we className, die dezelfde functie vervult als klasse en accepteert tekenreekswaarden.

De code ziet er over het algemeen iets uit in de trant van:

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

En onze afbeelding zou er als volgt uitzien:

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

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

Opmerking: we gebruikten img als selecteur kunnen we besluiten om het een te geven className en gebruik het als de selector.

Het formaat van een afbeelding wijzigen met inline-stijlen

In het vorige voorbeeld hebben we externe styling gebruikt, maar net als in traditionele HTML kunnen we de style attribuut om CSS-styling toe te voegen. De style attribuutwaarde moet een JavaScript-object zijn met sleutel-waardeparen:

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

Standaard is de basiseenheid in pixels, maar stel dat we andere eenheden willen gebruiken, zoals: rem, %, vh, enz. We zullen string gebruiken voor de sleutelwaarde van de stijlen:

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

Als we veel afbeeldingen hebben die een vergelijkbare stijl nodig hebben en geen externe stijl willen gebruiken, kunnen we een object maken om deze stijlobjecten vast te houden en het object vervolgens aan de styles attribuut:

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

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

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

Het formaat van een afbeelding wijzigen met de Breedte En Hoogte Attributen

In traditionele HTML is een manier om afbeeldingen te verkleinen, gebruik te maken van de height en width eigendom met de img tag en dit werkt ook met 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>
   );
};

Het belangrijkste nadeel van deze methode is dat gehannes met de hoogte en breedte de neiging hebben om afbeeldingen te vervormen, waardoor ze krimpen, uitrekken of anderszins hun verhouding verliezen. Dit kan worden opgelost door gebruik te maken van object-fit: cover;.

Onze afbeeldingen stylen

Wanneer we de gebruiken height, width, max-height, en andere CSS-eigenschappen om het formaat van onze afbeeldingen te wijzigen, hebben ze de neiging ze te vervormen, waardoor ze krimpen of uitrekken.

Het is altijd een goed idee om de object-fit eigenschap, die specificeert hoe een afbeelding moet worden aangepast om in de container te passen. Deze eigenschap kan verschillende waarden accepteren, zoals: contain, cover, fill, none en scale-down.

Andere CSS-eigenschappen, zoals max-width, min-width, max-height en min-height, kan de maximale en minimale waarden definiëren die een afbeelding kan bereiken, waardoor vervorming wordt beperkt.

Conclusie

In dit artikel hebben we geleerd hoe je afbeeldingen in React kunt verkleinen door te kijken naar de verschillende opties die voor ons beschikbaar zijn.

Het heeft echter de voorkeur om CSS-stijlen te gebruiken in plaats van vaste attributen aan deze afbeeldingen in te stellen, tenzij dit absoluut noodzakelijk is wanneer u deze waarden dynamisch wilt ontvangen, in welk geval inline-styling ook kan worden gebruikt.