使用 React 调整图像大小

由柏拉图重新发布

关注： 0

介绍

在网站或 Web 应用程序上添加视觉效果总是一个好主意，因为它们有助于吸引用户，但是当这些图像太大以至于用户必须滚动浏览时，会扭曲整个页面，它会达到相反的效果。

在本文中，我们将通过几种可能的方法学习如何使用 React 调整图像大小。

在 React 中调整图像大小与在传统 HTML 中调整图像大小非常相似，因为我们通过以下方式使用 CSS 样式（内部、内联或外部样式） className 或者 style 属性。我们也可以使用 height 和 width 上的属性 img 直接标记。

请注意： 在 React 中，我们不使用 class 就像我们在 HTML 中所做的那样，相反，我们使用 className，它执行相同的功能程并接受字符串值。

该代码通常看起来类似于：

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

如何使用宽度和高度 Attributes

在传统 HTML 中，调整图像大小的一种方法是使用 height 和 width 财产与 img 标记，这也适用于 React：

查看我们的 Git 学习实践指南，其中包含最佳实践、行业认可的标准以及随附的备忘单。停止谷歌搜索 Git 命令，实际上学习它！

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