将 reactjs 图像调整为 window 大小

Question

我正在做一个作品集构建项目，我有一个包含 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分别代表viewport height和viewport with，用来表示整个viewport的百分比height/width。例如，20vh 表示视口高度的 20%。

将 reactjs 图像调整为 window 大小

sizing reactjs images to window size

frontend

reactjs

react-component