html - Css-背景图像在顶部和底部被裁剪

Question

图像的大小是 1274 x 793。我想把它作为我的背景图像。但是当在 css 上添加它时，它会在顶部和底部被裁剪。我希望它在我的页面上显示完整大小而不在页面上拉伸(stretch)它。

html, body {
    height: 100%;
}
body {
    font-size: 100%;
    line-height: 1.5em;
}
/*Banner Section*/

#banner {
    height: 100%;
    background: url('/wonderwoman.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: scroll;
    background-position: center center;
    position: relative;
}

Answer 1

试试 background-size:contain;或者您可以通过限制任一图像的最小尺寸(例如)min-height: 700px;

来部分避免图像纵横比失真