Question

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

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

根据浏览器的宽度和高度，我可以做些什么来将图像定位在特定位置。理想情况下，如果可能的话，这种方式不包括媒体查询！

谢谢！

Answer 1

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

＆＃xA;＆＃xA;

HTML：

＆＃xA;＆＃xA;

 ＆lt; img id =“myImg”src =“http://i.imgur.com/5LGqY2p.jpg?1”＆gt;＆ #xA;

＆＃xA;＆＃xA;

CSS：

＆＃xA;＆＃xA;

  #myImg {＆＃xA; position：absolute;＆＃xA;左：20vw;＆＃xA;顶部：10vh;＆＃xA;}＆＃xA;

＆＃xA;＆＃xA;

在此示例中，图片的左上角将是20％的路径从屏幕左侧开始，从屏幕顶部向下10％。

＆＃xA;＆＃xA;

了解详情CSS单位： https://css-tricks.com/the-lengths-of- CSS /

＆＃XA;

基于浏览器宽度和高度的位置图像

1 个答案: