CSS:显示位置固定的图像，但允许用户缩放 [英] CSS: Display image with position:fixed but allow user zoom
问题描述
我创建了一个页面，该页面可缩放大图像以适合窗口，但是一旦加载并缩放图像以适合用户，该页面将不允许用户缩放.我希望初始视图的大小可以通过css实现，如下所示，但是此后，我希望用户能够进行缩放(或在移动/触摸屏设备上进行捏缩放)，以及 Ctrl + 0 返回初始视图大小.我该怎么做?这是完整的代码:
I've created a page that scales large images to fit the window, however it does not allow the user to zoom once the image is loaded and scaled to fit. I want the initial view size to be as realized by the css as shown below, but thereafter I want the user to be able to zoom (or pinch-zoom on mobile/touch-screen devices), as well as Ctrl+0 to return to the initial view size. How can I accomplish this? Here's the complete code:
<!DOCTYPE html>
<html>
<head>
<style>
img {
position: fixed;
max-width: 100%;
max-height: 100%;
top:0;
left:0;
bottom:0;
right:0;
margin: auto;
}
</style>
</head>
<body>
<img src="LARGE_IMAGE.jpg">
</body>
</html>
推荐答案
您应该在视口上设置宽度.之后，设备宽度将保持不变.
You should make width on viewport. Device width wouldn't change after that anyway.
这篇关于CSS:显示位置固定的图像，但允许用户缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
