Thay đổi kích thước hình ảnh bằng React

Giới thiệu

Luôn luôn là một ý tưởng hay khi có hình ảnh trên trang web hoặc ứng dụng web vì chúng giúp thu hút người dùng, nhưng khi những hình ảnh này lớn đến mức người dùng phải cuộn qua, làm biến dạng toàn bộ trang thì điều đó sẽ đạt được hiệu ứng ngược lại.

Trong bài viết này, chúng ta sẽ học cách thay đổi kích thước hình ảnh bằng React bằng cách sử dụng một số phương pháp khả thi.

Thay đổi kích thước hình ảnh trong React rất giống với thay đổi kích thước hình ảnh trong HTML truyền thống vì chúng tôi sử dụng các kiểu CSS (kiểu nội bộ, nội tuyến hoặc kiểu bên ngoài) thông qua className hoặc là style thuộc tính. Chúng tôi cũng có thể sử dụng height và width thuộc tính trên img gắn thẻ trực tiếp.

Lưu ý: Trong React, chúng tôi không sử dụng class giống như chúng tôi làm trong HTML, thay vào đó, chúng tôi sử dụng className, thực hiện chức năng tương tự như tốt nghiệp lớp XNUMX và chấp nhận các giá trị chuỗi.

Mã thường trông giống như sau:

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

Và hình ảnh của chúng ta sẽ như thế này:

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

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

Lưu ý: chúng tôi đã sử dụng img với tư cách là người chọn, chúng tôi có thể quyết định cung cấp cho nó một className và sử dụng nó làm bộ chọn.

Cách thay đổi kích thước hình ảnh với kiểu nội tuyến

Chúng tôi đã sử dụng kiểu bên ngoài trong ví dụ trước, nhưng cũng giống như trong HTML truyền thống, chúng tôi có thể sử dụng style để thêm kiểu CSS. Các style giá trị thuộc tính phải là một đối tượng JavaScript với các cặp khóa-giá trị:

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

Theo mặc định, đơn vị cơ bản là pixel, nhưng giả sử chúng ta muốn sử dụng các đơn vị khác như rem, %, vh, v.v. Chúng tôi sẽ sử dụng chuỗi cho giá trị khóa của kiểu:

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

Nếu chúng ta có nhiều hình ảnh cần tạo kiểu tương tự và không muốn sử dụng kiểu dáng bên ngoài, chúng ta có thể tạo một đối tượng để giữ các đối tượng kiểu này và sau đó thêm đối tượng vào styles thuộc tính:

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

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

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

Làm thế nào để thay đổi kích thước một hình ảnh với chiều rộng và cao Thuộc tính

Trong HTML truyền thống, một cách để thay đổi kích thước hình ảnh là sử dụng height và width tài sản với img và điều này cũng hoạt động với 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>
   );
};

Hạn chế chính của phương pháp này là việc loay hoay với chiều cao và chiều rộng có xu hướng làm biến dạng hình ảnh, làm cho chúng bị thu nhỏ, kéo dài hoặc mất tỷ lệ. Điều này có thể được khắc phục bằng cách sử dụng object-fit: cover;.

Tạo kiểu cho hình ảnh của chúng tôi

Khi chúng ta sử dụng height, width, max-heightvà các thuộc tính CSS khác để thay đổi kích thước hình ảnh của chúng ta, chúng có xu hướng làm biến dạng chúng, khiến chúng bị thu nhỏ hoặc kéo dài.

Luôn luôn là một ý tưởng tốt để bao gồm object-fit thuộc tính này chỉ định cách thay đổi kích thước hình ảnh để vừa với vùng chứa của nó. Thuộc tính này có thể chấp nhận nhiều giá trị như contain, cover, fill, none và scale-down.

Các thuộc tính CSS khác, chẳng hạn như max-width, min-width, max-heightvà min-height, có thể xác định giá trị tối đa và tối thiểu mà hình ảnh có thể đạt được, hạn chế biến dạng.

Kết luận

Trong bài viết này, chúng tôi đã học cách thay đổi kích thước hình ảnh trong React bằng cách xem xét các tùy chọn khác nhau có sẵn cho chúng tôi.

Tuy nhiên, bạn nên sử dụng các kiểu CSS hơn là phải đặt các thuộc tính cố định cho những hình ảnh này trừ khi thực sự cần thiết khi bạn muốn nhận các giá trị này một cách động, trong trường hợp đó, kiểu nội tuyến cũng có thể được sử dụng.