Mengubah Ukuran Gambar dengan React

Pengantar

Itu selalu merupakan ide yang baik untuk memiliki visual di situs web atau aplikasi web karena mereka membantu melibatkan pengguna, tetapi ketika gambar ini sangat besar sehingga pengguna harus menggulir, mendistorsi seluruh halaman, itu mencapai efek sebaliknya.

Pada artikel ini, kita akan belajar bagaimana mengubah ukuran gambar dengan React dengan menggunakan beberapa kemungkinan pendekatan.

Mengubah ukuran gambar di React sangat mirip dengan mengubah ukuran gambar dalam HTML tradisional karena kami menggunakan gaya CSS (baik gaya internal, inline, atau eksternal) melalui className atau itu style atribut. Kita juga dapat menggunakan height dan width atribut pada img menandai secara langsung.

Catatan: Di React, kami tidak menggunakan class seperti yang kami lakukan di HTML, sebagai gantinya, kami menggunakan className, yang melakukan fungsi yang sama dengan kelas dan menerima nilai string.

Kode umumnya akan terlihat seperti:

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

Dan gambar kita akan terlihat seperti ini:

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

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

Catatan: kami menggunakan img sebagai pemilih, kita dapat memutuskan untuk memberikannya className dan menggunakannya sebagai pemilih.

Cara Mengubah Ukuran Gambar Dengan Gaya Sebaris

Kami menggunakan gaya eksternal pada contoh sebelumnya, tetapi seperti dalam HTML tradisional, kami dapat menggunakan style atribut untuk menambahkan gaya CSS. Itu style nilai atribut harus berupa objek JavaScript dengan pasangan nilai kunci:

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

Secara default, unit dasarnya dalam piksel, tetapi misalkan kita ingin menggunakan unit lain seperti rem, %, vh, dll. Kami akan menggunakan string untuk nilai kunci gaya:

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

Jika kita memiliki banyak gambar yang membutuhkan gaya serupa dan tidak ingin menggunakan gaya eksternal, kita bisa membuat objek untuk menampung objek gaya ini dan kemudian menambahkan objek ke styles atribut:

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

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

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

Cara Mengubah Ukuran Gambar Dengan lebar Dan tinggi atribut

Dalam HTML tradisional, salah satu cara untuk mengubah ukuran gambar adalah dengan menggunakan height dan width properti dengan img tag dan ini juga berfungsi dengan Bereaksi:

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>
   );
};

Kelemahan utama dari metode ini adalah bahwa mengutak-atik tinggi dan lebar cenderung mendistorsi gambar, membuatnya menyusut, meregang atau kehilangan rasionya. Ini dapat diperbaiki dengan menggunakan object-fit: cover;.

Menata Gambar Kami

Ketika kita menggunakan height, width, max-height, dan properti CSS lainnya untuk mengubah ukuran gambar kita, mereka cenderung mendistorsinya, membuatnya menyusut atau meregang.

Itu selalu merupakan ide yang baik untuk menyertakan object-fit properti, yang menentukan bagaimana gambar harus diubah ukurannya agar sesuai dengan wadahnya. Properti ini dapat menerima berbagai nilai seperti contain, cover, fill, none dan scale-down.

Properti CSS lainnya, seperti max-width, min-width, max-height, dan min-height, dapat menentukan nilai maksimum dan minimum yang dapat dicapai gambar, membatasi distorsi.

Kesimpulan

Dalam artikel ini, kita mempelajari cara mengubah ukuran gambar di React dengan melihat berbagai opsi yang tersedia bagi kita.

Namun, lebih baik menggunakan gaya CSS daripada harus menetapkan atribut tetap ke gambar ini kecuali benar-benar diperlukan ketika Anda ingin menerima nilai ini secara dinamis, dalam hal ini penataan gaya sebaris juga dapat digunakan.