javascript - 根据浏览器宽度和高度定位图像

Question

我想知道是否可以根据浏览器的宽度和高度在 HTML 文件中定位图像。我知道如果我想更改图像的宽度/高度，我可以这样做:

<script>                                                   
    alert("Width is " + window.outerWidth + " height is " + window.outerHeight);
    var canvas = document.getElementsByTagName('img')[0];                   
    canvas.width = 200;                                                       
  </script>  

有什么类似的方法可以根据浏览器的宽度和高度将图像定位在特定位置。理想情况下，一种尽可能不包括媒体查询的方式!

谢谢!!

Answer 1

要根据浏览器的宽度和高度定位图像，请给它一个 id 以在 CSS 中定位它。然后使用 id 给它一个绝对位置，并使用 vw 和 vh 单位来定位它。每个 1vw 是窗口宽度的 1%，每个 1vh 是窗口高度的 1%:

HTML:

<img id="myImg" src="http://i.imgur.com/5LGqY2p.jpg?1">

CSS:

#myImg {
    position: absolute;
    left: 20vw;
    top: 10vh;
}

在此示例中，图像的左上角距离屏幕左侧 20%，距离屏幕顶部 10%。

---

在这里阅读更多关于 CSS 单元的信息:https://css-tricks.com/the-lengths-of-css/