크기가 흩어져 있는 이미지를 반응형으로 종횡비를 맞추어 표시시킨다

추가 (2021/10/14)

하고 싶은 일

CSS로 이미지를 자르는 방법

object-fit을 사용하는 방법

img {
  object-fit: cover;
  width: 200px;
  height: 150px;
}

부모 요소로 둘러싸는 방법

.image-trim {
  position: relative;
  overflow: hidden;
  padding-top: 60%; /* 比率 */
}
.image-trim img {
  width: 100%;

  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: auto;
  transform: translate(-50%, -50%);
}

해결 방법은 상기 2패턴을 합쳐

.image-trim {
  position: relative;
  overflow: hidden;
  padding-top: 60%; /* 比率 */
}
.image-trim img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
}

샘플

왜 그렇게 되는가

잘 생각하면 간단한 이야기로

• img 에 object-fit:cover 를 지정해, 종횡 100% 를 지정하는 것으로 부모 요소의 크기 의존으로 트리밍할 수 있다.
• 부모 요소의 크기 지정이 반응형입니다.
• 위치를 절대치 지정하는 것으로 프레임내에 들어간다.

자르기 위치를 변경하려면

「트리밍 위치를 중앙이 아니고 다른 것이 좋다!」라고 할 때는 object-position 로 바꿀 수 있다.

object-position - CSS: 캐스케이딩 스타일시트 | MDN

object-position: left top; /* 左上 */
object-position: 100px 50px; /* 横方向100px 縦方向50px */

초기값이 50% 50% 라고 하는 것으로 특별히 지정하지 않으면 세로 방향 가로 방향 모두 중앙이 된다.

참고

해결의 실마리가 된 Codepen (감사합니다…)

Responsive image with picturefill and object-fit