html 반응형 이미지에 대해 질문드립니다

조회수 921회

https://jsfiddle.net/84e7vL9n/8/

보시면 작은 원이 나타났다가 그 뒤에 원에 사각형이달린 이미지가 나타나는데요

애니메이션을 넣다보니 작은이미지와 큰이미지의 동일한 원부분이 같은 크기로 조절되야 합니다

크기가 서로다른 이미지를 동일한 비율로 증감시킬려면 어떻게 만들어야될까요

  • (•́ ✖ •̀)
    알 수 없는 사용자
  • 어떤 동작을 하는지 알기가 어렵네요. Nullgom 2018.2.22 20:28

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;
    }
    
    

답변을 하려면 로그인이 필요합니다.

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)