reactjs 이미지의 크기를 창 크기로 조정

질문

포트폴리오 구축 프로젝트를 진행 중이며 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>
                                                                                  )
                                                                                    }
                                                                                    }

감사!

답변1

뷰포트 단위 를 사용하여 이러한 이미지의 크기를 지정할 수 있습니다.

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

vh and vw stand for viewport height and viewport with respectively, and they are used to represent a percentage of the full viewport height/width. For instance, 20vh represents 20% of the viewport height.

 

 

 

 

출처 : https://stackoverflow.com/questions/61720659/sizing-reactjs-images-to-window-size