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.
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.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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.
Re-pop up a picture window, or use css to create effects
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.