[CSS] 화면 늘리면 이미지 커질 때, 이미지 사이즈 설정

.slide-box img {
  /* width: 100%; */
  max-width: 820px;
  /* padding: 20px; */
  height: auto;
  border-radius: 2vw; /* 뷰포트 너비에 따라 둥근 모서리 크기 조정 */
  display: block;
  margin: auto;
  /* text-align: center; */
  /* height: auto; 이미지가 세로로 늘어나지 않도록 추가 */
}

 max-width: 820px; 를 줬더니 

화면은 늘려도 이미지가 엄청 크게 늘어나지 않음.

.slide-box img {
  /* 사진 조금 잘리는 걸 아래의 코드로 해결.*/
  width: 100%;
  max-width: 920px;
  height: auto;
  border-radius: 20px;
  display: block;
  margin: auto;
}

사진이 조금 잘리길래

width: 100% 로 주고

 

더 마구잡이로 커지지 않게 이미지 사이즈 제한도 줬다.

max-width: 920px

 

@media screen and (max-width: 1200px) {

  .wrapper {

    max-width: auto;

  }

  .navbar a {

    font-size: 22px;

  }

  /* .slide-box img {

    max-width: 820px;

  } */

}

  /* .slide-box img {

    max-width: 820px;

  } */

미디어 쿼리에 

max-width 도 줬었는데 별 의미 없어서 삭제.