html - 背景适合屏幕并在更改浏览器时保持纵横比

Question

我需要我的背景图像适合我的屏幕，在 View 中保持整个图像和纵横比(图像的原始尺寸为 2160 x 1440)，并在我说重新调整浏览器或 View 的大小时重新调整而不扭曲或截断图像它在另一个浏览器中。我有一种感觉，我可以使用 flex-box 工具，但我对它很不熟悉。有谁知道解决这个问题的方法吗？

这是我目前的代码:

<style>
body {
    background-image: url(img/index.png);
    background-size:     cover;
    background-repeat:   no-repeat;
    background-position: center center; 
}

Answer 1

你正在寻找背景尺寸:封面:

.bg-image{
    background-image: url(http://i.imgur.com/GN2OnW8.jpg);
    background-size:cover;
}

https://jsfiddle.net/x0w2a0a7/