Zmiana rozmiaru obrazów za pomocą React

Wprowadzenie

Zawsze dobrze jest mieć wizualizacje w witrynie lub aplikacji internetowej, ponieważ pomagają zaangażować użytkownika, ale gdy te obrazy są tak duże, że użytkownik musi je przewijać, zniekształcając całą stronę, uzyskuje się odwrotny efekt.

W tym artykule dowiemy się, jak zmieniać rozmiar obrazów za pomocą Reacta, korzystając z kilku możliwych podejść.

Zmiana rozmiaru obrazów w React jest bardzo podobna do zmiany rozmiaru obrazów w tradycyjnym HTML, ponieważ używamy stylów CSS (wewnętrznych, wbudowanych lub zewnętrznych) poprzez className albo style atrybut. Możemy również użyć height i width atrybuty na img tag bezpośrednio.

Uwaga: W React nie używamy class tak jak robimy w HTML, zamiast tego używamy className, który pełni tę samą funkcję co klasa i akceptuje wartości łańcuchowe.

Kod ogólnie wyglądałby mniej więcej tak:

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

A nasz obraz wyglądałby tak:

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

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

Uwaga: użyliśmy img jako selektor możemy zdecydować się na nadanie mu className i użyj go jako selektora.

Jak zmienić rozmiar obrazu za pomocą stylów wbudowanych

W poprzednim przykładzie użyliśmy zewnętrznych stylów, ale podobnie jak w tradycyjnym HTML, możemy użyć style atrybut, aby dodać styl CSS. The style wartość atrybutu musi być obiektem JavaScript z parami klucz-wartość:

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

Domyślnie podstawową jednostką są piksele, ale załóżmy, że chcemy użyć innych jednostek, takich jak rem, %, vh, itp. Użyjemy string jako wartości klucza stylów:

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

Jeśli mamy wiele obrazów, które wymagają podobnej stylizacji i nie chcemy używać zewnętrznych stylów, możemy utworzyć obiekt do przechowywania obiektów tych stylów, a następnie dodać obiekt do styles atrybut:

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

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

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

Jak zmienić rozmiar obrazu za pomocą szerokość oraz wysokość Atrybuty

W tradycyjnym HTML jednym ze sposobów zmiany rozmiaru obrazów jest użycie height i width nieruchomość z img tag i działa to również z 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>
   );
};

Główną wadą tej metody jest to, że manipulowanie wysokością i szerokością ma tendencję do zniekształcania obrazów, powodując ich kurczenie się, rozciąganie lub w inny sposób utratę proporcji. Można to naprawić za pomocą object-fit: cover;.

Stylizacja naszych obrazów

Kiedy korzystamy z height, width, max-heighti inne właściwości CSS, aby zmienić rozmiar naszych obrazów, mają tendencję do ich zniekształcania, powodując ich kurczenie się lub rozciąganie.

Zawsze dobrym pomysłem jest uwzględnienie object-fit właściwość, która określa, w jaki sposób obraz powinien być zmieniany, aby pasował do jego kontenera. Ta właściwość może przyjmować różne wartości, takie jak contain, cover, fill, none i scale-down.

Inne właściwości CSS, takie jak max-width, min-width, max-height, min-height, może określić maksymalne i minimalne wartości, na jakie może trafić obraz, ograniczając zniekształcenia.

Wnioski

W tym artykule dowiedzieliśmy się, jak zmieniać rozmiar obrazów w React, przyglądając się różnym dostępnym opcjom.

Jednak lepiej jest używać stylów CSS, niż ustawiać stałe atrybuty dla tych obrazów, chyba że jest to absolutnie konieczne, gdy chcesz otrzymywać te wartości dynamicznie, w takim przypadku można również użyć stylów wbudowanych.