跨越浏览器窗口宽度的横幅图像

Span banner image across width of browser window

本文关键字：图像 浏览器 窗口 跨越      更新时间：2024-04-16

到目前为止：图像会显示在浏览器上，但不会调整其大小。

<html>
<img id="banner" src="c:/Users/Name/Downloads/picture.jpg" alt="banner" />

<Script>
var X = screen.width;
var Y = screen.height;
banner = document.getElementById('banner');
banner.style.width = X + 'px';
banner.style.height = (Y/5) + 'px';

</Script>
</html>

其他尝试：

使用纯javascript 显示图像

  • 通过javascript访问宽度和高度变量

首先，尝试无尺寸规格的

  • 使用时不显示图像

    document.write("<img src='c:/Users/Name/Downloads/picture.jpg' />")

未来想法：

我的下一次尝试将尝试将javascript宽度和高度变量传递给html，因为html图像似乎总是显示，并且给定了正确的大小规范，那么这正是我想要的。如果我找到一个成功的方法，我会把它发布在这里。

标记和类似的CSS应该会为您带来好处。

<div class="banner"></div>
div
{
    background:url(https://www.google.com/images/srpr/logo11w.png) no-repeat left top;
    width:100%;
    height:200px;
    background-size:cover;
}

或者更好的是，你可以尝试这个CSS，而不是上面的

div
{
    position:fixed;
    left:0px;
    right:0px;
    top:0;
    height:250px;
    background:url(https://www.google.com/images/srpr/logo11w.png) no-repeat center center;
}
相关文章：