将reactjs图像调整为窗口大小

Question

我正在进行portfoilo建造项目，并且有一个包含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>
    )
  }
}

谢谢！

Answer 1

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

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

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