CSS 이미지 크기, 비율에 맞게 늘이는 방법

질문 : CSS 이미지 크기, 비율에 맞게 늘일 수 있습니까?

---

이미지가 있는데 특정 너비와 높이 (픽셀 단위)로 설정하고 싶습니다.

width:150px; height:100px )를 사용하여 너비와 높이를 설정하면 이미지가 늘어나고보기 흉할 수 있습니다.

어떻게 CSS를 사용하여 특정 크기로 이미지를 기입하고, 스트레칭하지 않으려면?

이미지 채우기 및 늘리기의 예 :

원본 이미지 :

늘어난 이미지 :

채워진 이미지 :

위의 채워진 이미지 예에서 먼저 이미지의 크기가 150x255 (유지 된 가로 세로 비율)로 조정 된 다음 150x100으로 잘립니다.

답변

---

object-fit 사용할 수 있습니다.

.cover {
  object-fit: cover;
  width: 50px;
  height: 100px;
}

<img src="http://i.stack.imgur.com/2OrtT.jpg" class="cover" width="242" height="363" />

여기에서 예 보기

IE 용 polyfill이 있습니다 : https://github.com/anselmh/object-fit

출처 : https://stackoverflow.com/questions/11757537/css-image-size-how-to-fill-but-not-stretch