介绍
在网站或 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>
);
};
这种方法的主要缺点是调整高度和宽度往往会扭曲图像,使它们收缩、拉伸或以其他方式失去比例。 这可以通过使用来解决 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 样式,而不是必须为这些图像设置固定属性,除非当您想要动态接收这些值时绝对必要,在这种情况下也可以使用内联样式。