在 React 中調整影象大小

幾乎所有的使用者體驗設計師都同意內容應該包含視覺元素來吸引讀者的注意力。React 是用於構建現代 Web 應用程式的最流行的框架之一。

自然，React 開發人員必須想辦法在他們的應用程式中包含影象。本文重點介紹影象樣式以調整其大小。

在 React 中調整影象大小

在 React 中有很多方法可以調整影象大小。你可以使用樣式來指定它們的大小，甚至讓使用者指定影象的絕對或相對大小。

要在 React 中設定任何元素的樣式，你需要使用 CSS 樣式，可以使用 className 和 styles 屬性進行設定。className 值必須是引用 CSS 檔案中的類定義的字串。

styles 屬性值需要是一個 JavaScript 物件，鍵值對等於 CSS 規則。

在開發 React 應用程式時，你應該使用 className 屬性而不是 class，傳統的 HTML 屬性。如果你嘗試使用 class 屬性，它可能會起作用（取決於你的 React 版本），但它會在控制檯中顯示警告。

在 React 中如何調整影象大小的基本示例

這是一個如何使用 CSS 樣式更改影象外觀的簡單示例。

img {
  width: 200px;
  height: 200px;
}

在這種情況下，我們選擇應用程式中的所有 img 元素。如果你想了解更多關於 CSS 選擇器、它們的特殊性等的資訊，請閱讀這篇文章。

這個程式碼示例有一個簡單的應用程式，它只包含一個 img 元素。

export default function App() {
  return (
    <div>
      <img src="https://i.pinimg.com/564x/40/7e/e1/407ee19bfc18ed58afd556695524630c.jpg" />
    </div>
  );
}

如果你檢視 CodeSandbox 上的演示，你會看到影象寬 200 畫素，高 200 畫素。

畫素是 React 中設定元素寬度和高度的最基本單位。其他單位是相對的，取決於其他因素。

例如，vh（視口高度的縮寫）取決於使用者螢幕的高度。你還可以設定百分比值，它告訴 CSS 確保元素佔用指定的可用空間。

如果將寬度設定為 50%，則元素將佔用容器中 50% 的可用空間寬度。要了解有關 CSS 中度量單位的更多資訊，請閱讀本指南。

React 和 CSS 中的影象大小屬性

現代 Web 應用程式應該是響應式的。例如，影象應該根據使用者是使用智慧手機還是個人電腦瀏覽而自動更改其大小。

為了在 React 中調整影象大小，開發人員使用 CSS 屬性，如 min-height、max-height、min-width 和 max-width。正如你可能猜到的，min-height 和 min-width 設定了影象的基本最小尺寸。

無論使用者的螢幕大小如何，元素都不會小於指定值。另一方面，max-height 和 max-width 定義了影象可以擴充套件的最大尺寸。

你可以使用 border-radius CSS 屬性為你的影象新增圓角。50% 的值將給它一個圓形。

內聯樣式

有時最好快速設定影象元素的樣式。在這種情況下，你可以使用 JSX 中的 styles 屬性。

讓我們看一個簡單的例子。

<img
    styles={{ minWidth: 300, minHeight: 300 }}
    src="https://i.pinimg.com/474x/53/c3/3b/53c33b5e9758144727b99d2bcc141b1f.jpg"
 />

styles 屬性的值必須是 JavaScript 物件。出於這個原因，有很多事情要記住。

首先，在 JSX 中，你必須始終用一對花括號包裹 JavaScript 表示式。示例中有兩對花括號：一對用於定義物件，另一對花括號告訴 JSX 將其視為 JavaScript 表示式。

另外，請注意 CSS 屬性 min-width 變為 minWidth。這是必需的，因為 CSS 屬性名稱成為 styles 物件的屬性。

這兩個詞被擠在一起並 camelCased。

在上述示例中，該物件直接作為 styles 屬性值提供。當屬性太多時，更易讀的方法是在 JSX 之外定義 styles 物件並引用它。

讓我們看一個例子。

export default function App() {
  const imageStyles = { minWidth: 300, minHeight: 300 };
  return (
    <div>
      <img
        className="sampleImg"
        src="https://i.pinimg.com/564x/40/7e/e1/407ee19bfc18ed58afd556695524630c.jpg"
      />
      <img
        styles={imageStyles}
        src="https://i.pinimg.com/474x/53/c3/3b/53c33b5e9758144727b99d2bcc141b1f.jpg"
      />
    </div>
  );
}

在這裡，我們定義了 imageStyles 變數並將其設定為包含用於設定影象樣式的 CSS 規則的物件。在 return 語句中，我們引用它。

CodeSandbox 上提供了演示。