Question

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

<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图像总是显示并给出正确的大小规格，那么这正是我想要的。如果我找到一个成功的方法，我会在这里发布。

Answer 1

像这样的标记和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;
}

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

1 个答案: