javascript - 如何根据窗口大小更改DIV的高度

Question

我有以下 HTML 代码:

<div id="subpageHeaderImageSection">
    <div id="subpageHeaderLeft">
        <span id="holdImageP"></span>
            <!--[if lte IE 10]><img id="igm" src="theImages/subpageHeaderImageP.png" /><![endif]-->
    </div>
</div>

它在我的页面上显示图像作为标题。我遇到的问题是，当浏览器被拉伸(stretch)时，宽度会发生变化，但高度不会发生变化。

这是一个正常显示监视器的示例，它在 DIV 内显示图像:

但是如果我拉伸(stretch)浏览器，图像会在宽度上扩展但在高度上不会扩展:

这是 CSS:

#subpageHeaderImageSection {
    position: relative;
    top: 0;
    width: 100%;
    height: 400px;
}
#subpageHeaderLeft {
    position: absolute;
    width: 100%;
    height: 100%;
}
#holdImageP {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../theImages/subpageHeaderImageP.png') no-repeat;
    background-size: 100% 100%;
}

我可以使用 JQuery 甚至 CSS 来根据 DIV 的宽度拉伸(stretch)高度，以便图像在某些屏幕上看起来不会拉伸(stretch)吗？

Answer 1

1. 当您在图像上设置特定高度时，无论浏览器调整大小，它都会始终保持该高度

2. 当您在“容器”或图像周围的元素上设置特定高度时，您的图像将被限制为该容器尺寸。(一般而言)

如果您希望调整图像大小，您需要删除height: 400px。

注意:您的图像只会“增长”到其自然大小。因此，如果您有一张 200 像素高和 200 像素宽的图像，那么它会尽可能大(不改变图片)。

此外...如果您的图片高度必须至少为 400 像素 - 尝试使用

image{
  min-height: 400px;
}

这基本上只是设置您的图片，使其最小高度为 400 像素；

如果您希望您的图像随着浏览器调整大小而动态增长，有几种方法可以实现。查看本教程 http://css-tricks.com/perfect-full-page-background-image/