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