使用 React 調整圖像大小

簡介

在網站或 Web 應用程序上添加視覺效果總是一個好主意，因為它們有助於吸引用戶，但是當這些圖像太大以至於用戶必須滾動瀏覽，從而扭曲整個頁面時，它會達到相反的效果。

在 React 中調整圖像大小與在傳統 HTML 中調整圖像大小非常相似，因為我們通過 className 使用 CSS 樣式（內部、內聯或外部樣式） 或 style 屬性。我們也可以使用 height 和 width img 上的屬性 直接標記。

注意： 在 React 中，我們不使用 class 就像我們在 HTML 中所做的那樣，我們使用 className ，它執行與 class 相同的功能 並接受字符串值。

代碼通常看起來類似於：

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

如何使用 width 調整圖像大小 還有身高 屬性

在傳統 HTML 中，調整圖像大小的一種方法是使用 height 和 width img 的屬性 標記，這也適用於 React：

免費電子書：Git Essentials

查看我們的 Git 學習實踐指南，其中包含最佳實踐、行業認可的標準以及隨附的備忘單。停止谷歌搜索 Git 命令並真正學習 它！

import Logo from './images/react-logo.png';
const App = () => {
   return (
      <div>
          <img src={Logo} width="500" height="600" alt="" />
          <!-- OR -->
          <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 樣式，而不是必須為這些圖像設置固定屬性，除非當您希望動態接收這些值時絕對必要，在這種情況下也可以使用內聯樣式。