使用几种可能的方法来调整React的图片大小（附代码示例）

简介

在网站或网络应用上有视觉效果总是个好主意，因为它们有助于吸引用户，但如果这些图片太大，以至于用户不得不滚动浏览，扭曲了整个页面，就会达到相反的效果：

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

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

注意：在React中，我们不象在HTML中那样使用class ，而是使用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>
   );
};

如何用宽度和高度属性调整图片的大小

在传统的HTML中，调整图片大小的一种方法是利用height 和width 属性与img 标签，这也适用于React：

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样式，而不是为这些图片设置固定的属性，除非当你想动态地接收这些值时，绝对必要，在这种情况下，也可以使用内联样式。