Зміна розміру зображень за допомогою React

Вступ

Це завжди гарна ідея мати візуальні елементи на веб-сайті чи веб-додатку, оскільки вони допомагають залучити користувача, але коли ці зображення настільки великі, що користувачеві доводиться прокручувати сторінку, спотворюючи всю сторінку, досягається протилежний ефект.

У цій статті ми навчимося змінювати розміри зображень за допомогою React за допомогою кількох можливих підходів.

Зміна розміру зображень у React дуже схожа на зміну розміру зображень у традиційному HTML, оскільки ми використовуємо стилі CSS (внутрішні, вбудовані чи зовнішні стилі) через className або style атрибут. Ми також можемо використовувати height та width атрибути на img тег безпосередньо.

Примітка: У React ми не використовуємо class як у HTML, замість цього ми використовуємо className, який виконує ту саму функцію, що й клас і приймає рядкові значення.

Загалом код виглядав би приблизно так:

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

І наше зображення буде виглядати так:

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

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

Примітка: ми використовували img як селектор, ми можемо вирішити надати йому a className і використовувати його як селектор.

Як змінити розмір зображення за допомогою вбудованих стилів

Ми використовували зовнішній стиль у попередньому прикладі, але, як і в традиційному HTML, ми можемо використовувати style атрибут для додавання стилю CSS. The style значення атрибута має бути об’єктом JavaScript із парами ключ-значення:

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

За замовчуванням основною одиницею є пікселі, але припустімо, що ми хочемо використовувати інші одиниці, як rem, %, vhтощо. Ми будемо використовувати рядок для значення ключа стилів:

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

Якщо у нас є багато зображень, які потребують подібних стилів і не хочуть використовувати зовнішні стилі, ми можемо створити об’єкт для зберігання цих об’єктів стилів, а потім додати об’єкт до styles атрибут:

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

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

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

Як змінити розмір зображення за допомогою ширина і висота Attributes

У традиційному HTML одним із способів змінити розмір зображень є використання height та width власність з img і це також працює з 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>
   );
};

Основний недолік цього методу полягає в тому, що вагання з висотою та шириною спотворюють зображення, змушуючи їх зменшуватися, розтягуватися або іншим чином втрачати співвідношення. Це можна виправити за допомогою object-fit: cover;.

Стилізуємо наші зображення

Коли ми використовуємо height, width, max-heightта інші властивості CSS для зміни розміру наших зображень, вони мають тенденцію спотворювати їх, змушуючи їх стискатися або розтягуватися.

Завжди доцільно включити object-fit властивість, яка вказує, як зображення має бути змінено, щоб відповідати його контейнеру. Ця властивість може приймати різні значення, наприклад contain, cover, fill, none та scale-down.

Інші властивості CSS, наприклад max-width, min-width, max-height та min-height, може визначати максимальні та мінімальні значення, яких може досягти зображення, обмежуючи спотворення.

Висновок

У цій статті ми дізналися, як змінювати розміри зображень у React, розглядаючи різні доступні нам варіанти.

Однак краще використовувати стилі CSS, а не встановлювати фіксовані атрибути для цих зображень, якщо це не є абсолютно необхідним, коли ви хочете отримувати ці значення динамічно. У цьому випадку також можна використовувати вбудовані стилі.