css3 - 在手机app端实现点击缩略图展示原图

Question

原图如何布局才能使其不是真又能正常现实在屏幕中央

Answer 1

需要取得原图的大小，然后JS通过计算让它在屏幕中央，这里最主要的一点技巧就是要判断是高度优先还是宽度优先，因为有的图是横向的，而你的屏是竖的，这时需要根据宽度来缩放图片，反之应该根据高度来缩放图片。单纯用CSS无法实现不失真且图片不超出屏幕。

Answer 2

重新弹出一个图片窗口，或者css做效果

Answer 3

干脆这样 点击缩略图之后出现个全屏的盒子，将盒子的背景图片设为该图片，然后用background-size:contain;这个东东，就不用跟楼上说的那样还要判断是高度优先还是宽度优先了。当然了如果还要在展示原图的情况下要能放大缩小原图，就试着改变meta的相关属性，同时把对应的标签设为超出自动显示滚动条。我思路大概就这样了，可以参考下。