根据窗口大小调整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

您可以使用视口单位来调整这些图像的大小：

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

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