拉伸背景图像宽度但裁剪高度

Question

如何制作背景 img 将：

水平伸展window
固定高度
裁剪高度大于内容的高度（不缩小）

目前我有实现 #1 和 #2 的代码，但我似乎无法实现 #3:

<img class="background" src="images/page-background.png"/>

html {
    position: relative;
}

.background {
    width: 100%;
    height: 2800px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

我尝试将 img 移动到带有 overflow: hidden 的 div 中，但由于某些原因没有成功：

<div class="background-wrap">
    <img class="background" src="images/page-background.png"/>
</div>

.background-wrap {
    position: absolute;
    width: 100%;
    height: 1000px;
    overflow: hidden;
    z-index: -1;
}

你如何在 CSS / HTML（没有 JavaScript）中正确地做到这一点？

Answer 1

您可以像这样在 div 上使用 css 背景图像：

.background-wrap {
 background: url(images/page-background.png) no-repeat;
 background-size: 100% 500px;
}

指定的背景尺寸；在 window 上水平拉伸 100%，并设置 500 像素的固定高度（如果您希望图像高度与宽度成比例缩放，请将其更改为自动）。

Answer 2

抱歉，伙计们，原来我完全忘记删除重复的背景 <img>，这是我在将 HTML 拆分为多个文件（实际上是 PHP 文件，但这无关紧要）后留下的.

为了将来参考，以下对我有用：

<html>
    <head>...</head>
    <body>
       <div class="background-wrap">
           <img class="background" src="images/page-background.png"/>
       </div>
    </body>
</html>

html {
    position: relative;
}

.background-wrap {
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
    overflow: hidden;
    z-index: -1;
}

.background {
    width: 100%;
    height: 2800px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

拉伸背景图像宽度但裁剪高度

Stretch background image width but crop height

html

css

background