Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
Tags
- 리액트
- 쌓임맥락
- nextjs사용법
- 폼 입력 바인딩
- SCSS use
- Spacer
- 다른컴퓨터에서 git사용
- SCSS import
- git 같은계정 다른 컴퓨터
- KDT 프로그래머스
- SCSS extend
- 프로그래머스 프론트엔드 데브코스
- SCSS forward
- postcss
- vuex map
- vue mixin
- Vue
- 고양이 사진 검색기
- netlify redirect
- KDT 프로그래머스 데브코스 프론트엔드
- flex
- 이벤트 수식어
- vue 이벤트 수신
- react next
- 리스트 렌더링
- 프로그래머스 K_Digital Training
- vue 지역 컴포넌트
- 프로그래머스 데브코스
- 프로그래머스 데브코스 프론트엔드
- intersection opserver
Archives
- Today
- Total
혼자 적어보는 노트
[CSS] object-fit 속성으로 오브젝트 채우기 본문
CSS를 이용하여 비율에 맞게 이미지를 조정해 본 적이 있을 것이다.
보통 background-image로 받아서 size를 조정하거나 자체 이미지를 수정했었던 기억이 있는데
CSS3 object-fit 속성을 이용하여 좀 더 편하게 수정을 할 수 있다는 것을 알게되었다.
이미지 뿐만 아니라 각각의 다양한 크기를 가진 object들(<img>, <video>, <object>, <svg> 등)을 비율에 맞게
재 설정하는데에 유용하다.
*IE에서는 지원이 되지 않음
object-fit의 사용
img{
width: 200px;
height: 200px;
object-fit: fill;
}
object-fit: none;
object의 원본사이즈로 가운데 정렬을 해준다.
object-fit: fill;
지정된 너비와 높이에 따라 이미지가 확대,축소 되어 채워진다.
object-fit: contain ;
종횡비는 유지되지만 정의된 너비와 높이안에서만 적용되어 빈 공간이 생길 수있다.
object-fit: cover;
objcet가 종횡비를 유지하면서 빈공간이 없도록 확대된다.
object-position
기본 속성은 center로 맞추어져 있지만 이미지의 position을 변경할 수 있다.
object-fit: cover와 border-radius
img{
width: 200px;
height: 200px;
object-fit: cover;
border-radius: 100px;
}
+ background 속성을 이용해서 위와 같은 결과를 출력 할 수도 있다.
#background {
width: 200px;
height: 200px;
background-image: url('./img/poo1.jpg');
background-size: cover;
background-position: center;
border-radius: 100px;
}
'CSS' 카테고리의 다른 글
[CSS] 플렉스박스(flex-box)의 기본 개념 / 속성 이해하기 (0) | 2021.12.24 |
---|---|
[CSS] 가변 단위 em, rem의 사용 (0) | 2021.12.20 |
[CSS] 화면 가운데 정렬 / 화면 가운데 팝업 / animation 적용 시 가운데 정렬 유지 (0) | 2021.12.16 |
[CSS] vimeo 영상 반응형으로 설정 (0) | 2021.11.02 |
css 그라데이션 쉽게 표현하기 (0) | 2021.10.10 |
Comments