如何調整響應圖像的上下調整

-5

任何人都知道如何在點擊上下調整圖像大小。例如：nrk.no 如何調整響應圖像的上下調整

2017-05-12 Jan Henriksen

歡迎來到[so]！在這個網站，你應該嘗試**自己編寫代碼**。後** [做更多的研究]（//meta.stackoverflow.com/questions/261592)**如果你有問題，你可以**發佈你已經嘗試**與清楚的解釋是什麼是'工作**並提供[** Minimal，Complete和Verifiable示例**]（// stackoverflow.com/help/mcve）。我建議閱讀[問]一個好問題和[完美問題]（http://codeblog.jonskeet.uk/2010/08/29/writing-the-perfect-question/）。另外，一定要參加[遊覽]並閱讀[this]（// meta.stackoverflow.com/questions/347937/)**。 –

[點擊切換圖片大小]的可能重複（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

如何調整響應圖像的上下調整

回答

相關問題