CSS | 이미지 사이즈 맞추기 object-fit, absolute, background-image
정라잇 |
요약
<img> 태그의 늘림 현상을 방지하기 위해 object-fit 기능을 사용하는 것이 좋습니다. 그러나 익스플로러에서는 지원이 되지 않습니다. 이 방법 외에는 <div> 태그로 임의 영역을 준 다음 background-image 속성을 사용하는 방법이 있습니다.
object-fit
| fill (기본값) | object-fit: fill; | 사진을 영역에 맞추어 꽉채웁니다 |
| contain | object-fit: contain; | 비율은 고정인 상태로 꽉 채웁니다(여백생김) |
| cover | object-fit: cover; | 사진이 크면 영역에서 잘린 상태로 채웁니다. |
| none | object-fit: none; | 사진 크기가 고정된 상태로 잘립니다 |
| scale-down | object-fit: scale-down; | 사진이 작게 표시됩니다 |
object-position
| object-positon: 50% 50%; | 사진 중앙 정렬 |
| object-positon: left top; | 사진 좌측 상단 정렬 |
| object-positon: right bottom; | 사진 우측 하단 정렬 |
object-fit 의 영향을 받은 상태에서 위치를 자리잡습니다
background-image
| background-size: 300px 150px; | 이미지를 늘립니다 |
<style>
</style>
<div class="imgDiv"></div>