将 reactjs 图像调整为窗口大小答案

【问题标题】：sizing reactjs images to window size将 reactjs 图像调整为窗口大小
【发布时间】：2020-08-26 11:02:49
【问题描述】：

我正在做一个投资组合构建项目，我有一个包含 5 个图像的组件。我希望图像的高度和宽度为屏幕宽度的 1/5。我怎样才能做到这一点？

class TopPictures extends React.Component {


  render() {
    const imagestyle = {
      height: "200px",  //this is wrong
      width: "200px",
    };
    return(
      <div>
        <img src = {image1} style = {imagestyle} alt="image1"/>;
        <img src = {image2} style = {imagestyle} alt="image1"/>;
        <img src = {image3} style = {imagestyle} alt="image1"/>;
        <img src = {image4} style = {imagestyle} alt="image1"/>;
        <img src = {image5} style = {imagestyle} alt="image1"/>;

      </div>
    )
  }
}

谢谢！

【问题讨论】：

标签： reactjs frontend react-component

【解决方案1】：

您可以使用viewport units 来调整这些图像的大小：

const imagestyle = {
  height: "20vh",  
  width: "20vw",
};

vh 和vw 分别代表视口高度和视口与，它们用于表示整个视口高度/宽度的百分比。例如，20vh 代表视口高度的 20%。

【讨论】：