跨瀏覽器圖像預覽效果

Question

我試圖使用JavaScript創建圖像預覽效果 ，該效果可打開在全屏模式下單擊的所有圖像。 圖像本身使用以下代碼根據其大小居中。

CSS | 查看全部 | 結果

position: fixed;
top: 50%;
left: 50%;

簡體Javascript | 查看全部 | 結果

el.style.margin = "-" + el.height / 2 + "px -" + el.width / 2 + "px";

該代碼在Firefox中可以正常運行 ，但是在Webkit瀏覽器中，圖像被推到左上角，並且具有模糊的負邊距。 為什么此Javascript在Webkit瀏覽器中不起作用？ 我應該如何解決此代碼？

Answer 1

popupImage.style.margin = "-" + popupImage.clientHeight / 2 
    + "px -" + popupImage.clientWidth / 2 + "px";

參見https://stackoverflow.com/a/623174/1264804