如何根据窗口大小更改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>

它在页面上显示图像作为标题。 我遇到的问题是，拉伸浏览器时，宽度会改变，但高度不会改变。

这是一个普通显示监视器的示例，该监视器可以在DIV内很好地显示图像：

但是，如果我拉伸浏览器，图像的宽度将扩大，但高度不会扩大：

这是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的宽度拉伸高度，以使图像在某些屏幕上看起来不会拉伸吗？

Answer 1

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

2. 当您在“容器”或图像周围的元素上设置特定高度时，图像将被限制为该容器的尺寸。（通常来说）

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

注意：您的图片只会“增长”到其自然大小。 因此，如果您拥有200像素高和200像素宽的图像，那将与它获得的图像一样大（不改变图片）。

另外...如果您的图片高度必须至少为400px，请尝试使用

image{
  min-height: 400px;
}

基本上，这只是设置图像，以使其最小高度可以为400px。

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