单击使图像适合屏幕

Question

我有一张图片，点击后我想制作合适的屏幕。我目前正在使用链接到完整图像的简单IMG标签，但它不是我想要的。

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

我想让它适合屏幕（onclick），就像它发生在我的iphone上的Tumblr或Twitter应用程序上一样。这是我所描述的那种效果的example，但使用的是图像。

我试图在php或javascript中实现它，如果可能的话，用于Wordpress。任何帮助，包括你如何称呼这个功能，将不胜感激。

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