單擊使圖像適合屏幕

Question

我有一張圖片，當我單擊該按鈕時，我想做一個合適的屏幕。 我目前正在使用一個鏈接到完整圖像的簡單IMG標簽，但這不是我想要的。

 <div> <a href="img.jpg"><img src="img.jpg" width="100%"></a> </div>

我想使其適合屏幕顯示（onclick），就像它發生在我iPhone上的Tumblr或Twitter應用程序上一樣。 這是我要描述的那種效果的示例 ，但使用的是圖像。

我正在嘗試使其在WordPress的php或javascript中實現。 任何幫助，包括您如何調用此函數，將不勝感激。

Answer 1

假設您的意思是“使其適合屏幕”是指整個瀏覽器窗口，則可以執行此操作！

/* Adding the class to the image itself */
$('div').click(function () {
   $(this).children('img').addClass('full-size');
});

/* Adding the class to the container div */
$('div').click(function () {
   $(this).addClass('full-size');
});

/* CSS */
.full-size {
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   position: fixed;
}