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：顯示位置固定的圖像，但允許用戶縮放

回答

相關問題