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