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