assept-ratio, 이미지를 비율대로 줄이거나 늘려야 할때

티스토리 뷰

프로그래밍/CSS

쉬피드 2021. 11. 3. 16:37

728x90

.img_wrapper {padding-top: calc(100% / 101 * 75);}
.img_wrapper img{position: absolute;width:100%;height:100%;top:0;left:0;}

padding-top의 100% 값은 부모창의 크기이므로 레이아웃에 따라
고정픽셀이나 위와 같이 퍼센트로 입력해도 된다.

101 * 75 (101 * 75비율)
16 * 9(16 * 9) 비율 등 해당 부분을수정해주면 된다.

728x90

input이나 textarea 등 absolute 포지션일 때 (0)	2022.02.26
background image로 루프 이미지 애니메이션을 설정할때 반응형으로 하기. (0)	2021.05.16
모바일 기기인지 아닌지 구분하는 css (0)	2020.12.24
라디오, 체크박스 버튼이 제대로 동작 안될 때 (0)	2020.12.24

공지사항

최근에 올라온 글

최근에 달린 댓글

링크

글 보관함