CSS：显示位置固定的图像，但允许用户缩放

我已经创建了一个缩放大图像以适应窗口的页面，但是一旦图像加载并缩放以适合窗口，它就不允许用户缩放。我希望初始视图的尺寸像css一样实现，如下所示，但此后我希望用户能够缩放（或在手机/触摸屏设备上捏缩放），以及Ctrl + 返回到初始视图大小。我怎样才能做到这一点？以下是完整的代码：CSS：显示位置固定的图像，但允许用户缩放

<!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>

来源

2017-01-09 Tom

@happymacarts你是指'scale（）;'？ 'zoom'是一种旧式的IE风格。 –

@Tom为什么不直接链接到图像？浏览器默认缩放它，如果你点击或捏，它将放大全屏。 –

@MichaelCoker因为我打算禁用右键单击图像，只有在HTML标记中设置图像时才可能。 – Tom

您应该在视口上设置宽度。无论如何，设备宽度不会改变。

来源

2017-01-09 21:25:33

CSS：显示位置固定的图像，但允许用户缩放

回答

相关问题