CSS图像动态调整大小

我希望我的背景图像在调整窗口大小时动态调整大小。图像的比例是否改变并不重要。所以我尝试这样做的方法是设置CSS图像动态调整大小

width: 100vw; 
height: 100vh;

为IMG在体。

它做我想做的，但图像是一个标签，所以其他标签放置在它下面的布局，我找不到一种方法使图像忽略所有其他标签。

我也无法找到一个方法来做到这一点的

body { 
    background-image: url("bckg.jpg"); 
    //hoooooow? 
}

有什么建议？

来源

2017-02-24 Roman Korol

如果你希望你的背景图像根据窗口大小缩放，为什么不使用下列内容：

body { 
    background-image: url("bckg.jpg"); 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
}

因此，重要的一行是这样的：background-size: cover;这确保了背景图片“涵盖”可见如果你不希望图像裁剪但页面

来源

2017-02-24 09:22:29 Daniel

非常感谢！实际上，如果没有 ' background-attachment：fixed;' 行，它就不会以适当的方式工作。你能解释一下吗？ –

不客气！根据W3School的说法，“固定”值告诉浏览器背景附件的行为必须固定到视口（浏览器页面的可见部分），如果将其更改为“滚动”，则会滚动这一页。在这里阅读更多：https://www.w3schools.com/cssref/pr_background-attachment.asp – Daniel

的部分始终以高度和宽度试的100％以下：

body { 
    background: url('example.png') no-repeat fixed; 
    background-size: 100% 100%; 
}

Fidd le here

来源

2017-02-24 09:26:11 dafilipaj

我发现这一个更有用 – dehood

CSS图像动态调整大小

回答

相关问题