반응 형 이미지의 위아래로 크기를 조정하는 방법

-5

누구나 이미지를 클릭하면 위아래로 크기를 조절하는 방법을 알고 있습니다. 예 : nrk.no 반응 형 이미지의 위아래로 크기를 조정하는 방법

2017-05-12 Jan Henriksen

[so]에 오신 것을 환영합니다. 이 사이트에서는 ** 직접 코드를 작성하려고합니다 **. ** [더 많은 조사를 한 후에] (// meta.stackoverflow.com/questions/261592)** 문제가 있다면 ** 시도한 것을 게시 할 수 있습니다 ** ** 명확한 설명이 무엇인지 is not ' t 작업 **을 제공하고 [** Minimal, Complete, Verifiable example **] (// stackoverflow.com/help/mcve)를 제공하십시오. 좋은 질문과 [완벽한 질문] (http://codeblog.jonskeet.uk/2010/08/29/writing-the-perfect-question/)을 읽어 보는 것이 좋습니다. 또한 [둘러보기]를 읽고 ** [this] (// meta.stackoverflow.com/questions/347937/)**을 읽으십시오. –

가능한 [Toggle image size on click] (http://stackoverflow.com/questions/20850680/toggle-image-size-on-click) – BSMP

두 가지 다른 상태 사이에서 무언가를 바꾸려고 할 때마다 (on/끄기, 큰/작은, 보이는/숨김 등)은 '토글'이라는 단어로 몇 가지 검색을 수행합니다. – BSMP

예를 들어 웹 사이트는 CSS 전환을 사용하여 일부 이미지가 커지고 축소됩니다. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

아래에서 CSS 전환에 대해 자세히 알아볼 수 있습니다. 다음은 JQuery를 사용한 간단한 예입니다. Google 로고를 클릭하면 화면이 커지고 다시 클릭하면 축소됩니다.

<!DOCTYPE html> 
<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <style> 
    .box img { 
     transition: width .4s,margin .4s,max-width .4s; 
     transition-property: width, margin, max-width; 
     transition-duration: 0.4s, 0.4s, 0.4s; 
     transition-timing-function: ease, ease, ease; 
     transition-delay: 0s, 0s, 0s; 
    } 
    .box img.clicked{ 
     width: 500px; 
    } 
    </style> 

    <script> 
    $(function(){ 
     $('.box img').on('click', function() { 
      $(this).toggleClass('clicked'); 
     }); 
    }); 
    </script> 
</head> 
<body> 
    <div class="box"> 
     <img src="https://www.google.com/images/srpr/logo11w.png" width="100" /> 
    </div> 
</body> 
</html>

출처

2017-05-12 19:24:13 alfredo

반응 형 이미지의 위아래로 크기를 조정하는 방법

답변

관련 문제