1. 首页
  2. css

CSS打开带有全尺寸未缩放图像的窗口

对于这个网站的画廊部分,我希望人们有能力看到其原始大小的屏幕截图。由于这个网站的流动性,它的屏幕截图被缩小以适应它的专栏是相当常见的。所以我想出了一个小小的解决方案。

我的计划是打开一个窗口,它的大小正好适合图像。在我看来,快速,简单,完美的用户体验。你所要做的就是这样:

window.open(path-to-image);

实际上它比这要复杂一些。我们需要传递一组参数来得到我们想要的窗口。也就是说,含铬量尽可能少的那种。一个带有关闭按钮的顶部栏,就是这样。

window.open(path-to-image, null,>

Example:

The tricky part is figuring out just exactly what height and width values to pass. You can\"t just ask the image what size it is. Well you can, but it will lie. It will tell you its current size, not its natural size.

var>

To get the natural size, we\"ll create a new image in the magical ether of JavaScript, set its source to the source of the on-screen image, and then test its width and height. It will report correctly as it\"s untainted by CSS on the page.

var = new = 20; // little buffer to prevent forced scrollbars// Values to use when opening windowvar = magicEtherImage.height + padding;

我在我的网站上使用jQuery,所以最终我的代码是这样的:

$(\".view full size\")。单击(function(){var=new=图像宽度+20;var>

您可以在这样的单个图库页面上看到它的运行情况。

显然,它在移动设备上没有什么作用,所以我只是删除带有媒体查询的按钮

CSS打开带有全尺寸未缩放图像的窗口 为WP2原创文章,链接:https://www.wp2.cn/css/css%e6%89%93%e5%bc%80%e5%b8%a6%e6%9c%89%e5%85%a8%e5%b0%ba%e5%af%b8%e6%9c%aa%e7%bc%a9%e6%94%be%e5%9b%be%e5%83%8f%e7%9a%84%e7%aa%97%e5%8f%a3/

发表评论

您的电子邮箱地址不会被公开。