单击使图像适合屏幕

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