在 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 上提供了演示。