Изменение размера изображений с помощью 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 как селектор, мы можем решить дать ему className и использовать его как селектор.

Как изменить размер изображения с помощью встроенных стилей

В предыдущем примере мы использовали внешние стили, но, как и в традиционном HTML, мы можем использовать style атрибут для добавления стилей CSS. 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>
   );
};

Как изменить размер изображения с помощью ширина И, высота Атрибуты

В традиционном 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, а не устанавливать фиксированные атрибуты для этих изображений, за исключением случаев крайней необходимости, когда вы хотите получить эти значения динамически, и в этом случае также можно использовать встроенные стили.