이미지에 width와 height 값을 비율에 맞지 않게 넣더라도 찌그러지지 않게 하는 방법

<img>에 width와 height 값을 동시에 넣으면 가로세로 비율이 정확히 맞지 않는 이상 이미지가 찌그러진다. 

이를 해결하기 위해 CSS에 object-fit 속성을 넣으면 width와 height 조절 등으로 이미지의 크기가 달라지더라도 찌그러지지 않는다. 

object-fit: cover;로 할 경우 이미지 박스에 맞게 이미지 내용이 꽉 찬다.

비율도 유지 된다.

대신 가로 양쪽 끝이나 세로 양쪽 끝이 잘린다.

 

 

<p>원본</p>
<div>
  <img src="https://trouble-shooter.s3.ap-northeast-2.amazonaws.com/profile/socratone.png">
</div>

<p>그냥 조절했을 때</p>
<div>
  <img
    width="200" 
    height="100" 
    src="https://trouble-shooter.s3.ap-northeast-2.amazonaws.com/profile/socratone.png"
  >
</div>

<p>object-fit: cover;를 설정했을 때</p>
<div>
  <img
    class="fit"
    width="200" 
    height="100" 
    src="https://trouble-shooter.s3.ap-northeast-2.amazonaws.com/profile/socratone.png"
  >
</div>

.fit {
  object-fit: cover;
}