Bildgröße mit React ändern

Einleitung

Es ist immer eine gute Idee, visuelle Elemente auf einer Website oder Webanwendung zu haben, weil sie dazu beitragen, einen Benutzer einzubeziehen, aber wenn diese Bilder so groß sind, dass ein Benutzer durchscrollen und die gesamte Seite verzerren muss, wird der gegenteilige Effekt erzielt.

In diesem Artikel erfahren wir, wie Sie mit React die Größe von Bildern ändern, indem Sie verschiedene mögliche Ansätze verwenden.

Die Größenänderung von Bildern in React ist der Größenänderung von Bildern in herkömmlichem HTML sehr ähnlich, da wir CSS-Stile (entweder interne, Inline- oder externe Stile) über verwenden className oder im style Attribut. Wir können auch die verwenden height und width Attribute auf dem img direkt markieren.

Hinweis: In React verwenden wir nicht class wie wir es in HTML tun, verwenden wir stattdessen className, die die gleiche Funktion wie erfüllt Klasse und akzeptiert Zeichenfolgenwerte.

Der Code würde im Allgemeinen in etwa so aussehen:

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

Und unser Bild würde so aussehen:

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

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

Hinweis: wir verwendeten img Als Selektor können wir entscheiden, ihm a zu geben className und verwenden Sie es als Selektor.

So ändern Sie die Größe eines Bildes mit Inline-Stilen

Wir haben im vorherigen Beispiel externes Styling verwendet, aber genau wie in traditionellem HTML können wir die verwenden style -Attribut, um CSS-Styling hinzuzufügen. Das style Attributwert muss ein JavaScript-Objekt mit Schlüssel-Wert-Paaren sein:

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

Standardmäßig ist die Grundeinheit in Pixel, aber nehmen wir an, wir möchten andere Einheiten wie verwenden rem, %, vh, usw. Wir verwenden string für den Schlüsselwert der Stile:

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

Wenn wir viele Bilder haben, die ein ähnliches Styling benötigen und kein externes Styling verwenden möchten, könnten wir ein Objekt erstellen, das diese Styles-Objekte enthält, und das Objekt dann zu hinzufügen styles Attribut:

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

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

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

So ändern Sie die Größe eines Bildes mit dem Breite Und Höhe Attributes

In herkömmlichem HTML besteht eine Möglichkeit zur Größenänderung von Bildern darin, die zu verwenden height und width Eigentum mit dem img tag und das funktioniert auch mit 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>
   );
};

Der Hauptnachteil dieser Methode besteht darin, dass das Hantieren mit der Höhe und Breite dazu neigt, Bilder zu verzerren, wodurch sie schrumpfen, gedehnt oder auf andere Weise ihr Verhältnis verlieren. Dies kann mit behoben werden object-fit: cover;.

Gestaltung unserer Bilder

Wenn wir die verwenden height, width, max-height, und andere CSS-Eigenschaften, um die Größe unserer Bilder zu ändern, neigen sie dazu, sie zu verzerren, wodurch sie schrumpfen oder gedehnt werden.

Es ist immer eine gute Idee, die einzubeziehen object-fit -Eigenschaft, die angibt, wie die Größe eines Bildes an seinen Container angepasst werden soll. Diese Eigenschaft kann eine Vielzahl von Werten annehmen, z contain, cover, fill, none und scale-down.

Andere CSS-Eigenschaften, wie z max-width, min-width, max-height und min-height, kann die maximalen und minimalen Werte definieren, die ein Bild erreichen kann, wodurch Verzerrungen begrenzt werden.

Zusammenfassung

In diesem Artikel haben wir gelernt, wie man Bilder in React skalieren kann, indem wir uns die verschiedenen Optionen angesehen haben, die uns zur Verfügung stehen.

Es ist jedoch vorzuziehen, CSS-Stile zu verwenden, anstatt diesen Bildern feste Attribute zuzuweisen, es sei denn, dies ist unbedingt erforderlich, wenn Sie diese Werte dynamisch erhalten möchten. In diesem Fall kann auch ein Inline-Stil verwendet werden.