html 반응형 이미지에 대해 질문드립니다
조회수 921회
https://jsfiddle.net/84e7vL9n/8/
보시면 작은 원이 나타났다가 그 뒤에 원에 사각형이달린 이미지가 나타나는데요
애니메이션을 넣다보니 작은이미지와 큰이미지의 동일한 원부분이 같은 크기로 조절되야 합니다
크기가 서로다른 이미지를 동일한 비율로 증감시킬려면 어떻게 만들어야될까요
-
(•́ ✖ •̀)
알 수 없는 사용자
2 답변
-
어떤 동작을 하는지 알기가 어렵네요. 우선 같이 크기를 키울 이미지를 한 부모 요소에 넣고 부모요소를 키우면 같은 비율로 커지지 않을 까요?
CSS에 요소의 크기를 키우거나 변형시킬때.. 기준을 설정하기 위해 transform-orign 속성을 알아 보세요.
-
이미지 태그의
width
값을 수정하지 말고,height
값을 조정해서 가능합니다. 이미지 태그는 기본적으로width
값 또는height
값이auto
이기 때문에, 비율이 맞게 크기가 조절되기때문입니다.https://jsfiddle.net/w558gxvu/ 에서 확인 가능합니다.
@keyframes fadeIn { from {opacity: 0;} to {opacity: 1;} } .fadeIn { animation-duration: 2s; animation-fill-mode: both; animation-name: fadeIn; } #animate-img { display:none; z-index:2; } #animate-img2 { z-index:2; height: 46px; } .hide{display:none;} .show{display:inline;} /* 두 이미지의 높이가 같다는 공통점이 있으니, 두 이미지의 높이를 조정함으로써, 같은 비율로 크기를 조정할 수 있습니다.*/ img { height: 92px !important; }
댓글 입력