반응형 화면비율 유지 및 크기가 다른 이미지 박스에 맞추기

반응형 layout에서 사진이나 박스의 화면 비율 유지하기

.box {
  width: 30%;
  height: 0;
  padding-bottom: 30%;
}

크기가 다른 이미지 박스에크기 맞추고 가운데 정렬하기

.box img {
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
}