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

Question

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

Answer 1

You need to get the size of the original image, and then use JS to calculate it in the center of the screen. The most important trick here is to determine whether it is height priority or width priority, because some images are horizontal and your screen is vertical. , then the image needs to be scaled according to the width, otherwise the image should be scaled according to the height. It is impossible to achieve distortion-free and images that do not exceed the screen using CSS alone.

Answer 2

Re-pop up a picture window, or use css to create effects

Answer 3

Simply click on the thumbnail and a full-screen box will appear. Set the background image of the box to this image, and then use background-size:contain; this stuff. You don’t have to judge the height as mentioned above. The priority is width first. Of course, if you want to be able to zoom in and out of the original image while displaying it, try changing the relevant attributes of meta and setting the corresponding label to exceed the automatic display scroll bar. This is my idea, you can refer to it.