Question

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

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;

来部分避免图像宽高比的失真

Answer 2

添加

background-size: 100% 100%;

Answer 3

你也可以这样做

<html>
<body style="background-color:#000;">
    <div style="display: flex; justify-content: center;">
<img src="wonderwoman.jpg" height="100%" width="100%"  align="center"> 
</div>
<body>
</html>

Answer 4

只需删除“background-position：center center;”部分。

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

4 个答案: