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:
Sehen Sie sich unseren praxisnahen, praktischen Leitfaden zum Erlernen von Git an, mit Best Practices, branchenweit akzeptierten Standards und einem mitgelieferten Spickzettel. Hören Sie auf, Git-Befehle zu googeln und tatsächlich in Verbindung, um es!
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.