img / video / object / svg 등이 지정된 너비와 높이에 맞춰지는 방식을 지정한다.
썸네일이나 프로필같은 경우에도 사용가능하고 비율이 제각각인 이미지들을 고정된 틀에 맞추어 넣기 쉽다.
속성값
fill / contain / cover / none / scale-down
IE9이상 CSS로만 상당 가능합니다.
scale-down은 max-height, max-width 100%로 잡으면 되고요. cover는 min-height와 min-width를 100%로 잡고 부모요소에서 overflow:hidden하면 됩니다.
object-position은 top과 left를 -50%로 잡고, transform:translate(50%, 50%)를 기본값으로 거의 동일하게 쓰면 됩니다. 단 IE9~11는 부모요소에서 overflow:hidden이 필요합니다.
'퍼블리싱' 카테고리의 다른 글
| :first-child 와 :first-of-type 의 차이점 (0) | 2016.06.21 |
|---|---|
| sublime에서 class 쉽게 찾기 (0) | 2016.06.20 |
| 자바스크립트 - 알림창 네, 아니오로 표시 (0) | 2016.05.25 |
| 테이블 중간에 행추가 (0) | 2016.04.04 |
