0

我的目标是创建一个占据 100% 窗口高度的容器，并且在其中有一个也是 100% 窗口高度的图像。但是，我还想在容器上设置一个最小高度，这样事情就不会变得太小。
例如：

<html>
    <body style="height: 100%;">
        <div style="height: 100%; min-height: 500px;">
            <img src="cool.jpg" style="height: 100%"/>
        </div>
    </body>
</body>

（我发誓我的网页比这更酷）

好的，一切都很好。直到我们缩小窗口以便min-height启动。此时div，正如预期的那样，停止收缩，但img随着窗口继续收缩。

有什么想法吗？
纯 CSS 实现将是理想的，但如果需要，我对 JS 持开放态度。

4

4 回答 4

5

给图像min-height而不是容器怎么样？

于 2013-03-11T16:06:44.827 回答
0

试试这个：http: //jsfiddle.net/NpqCW/3/

如果您需要更多详细信息和示例，请使用我对以下问题的回答作为参考。https://stackoverflow.com/a/10582476/339367

基本上，您缺少的是根标签上的 height:100% ，即<html>. 所有父母都必须有这个设置才能工作，除了根元素之外，你都在做它<html>。

更新：

http://jsfiddle.net/jDk3s/

在图像上添加了 min-height:inherit 以使其在 chrome 上工作。它也可以通过删除IMG 父 div 上的最小高度来修复（但不确定你是否真的需要它）.. 所以你可以选择一种或另一种方式。

于 2013-03-11T16:24:23.347 回答
0

id只是将div背景设置为目标img，然后通过jquery限制resize时的高度。

<html>
<head>
<style>
div#cont {
background: url(path/to/cool.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-etc-vend-pref-background-size: cover;

}
</style>
</head>
<body style="height: 100%;">

  <div id="cont" style="height: 100%; min-height: 500px;">
    <img id="bg" src="cool.jpg" style="height: 100%"/>
  </div>


<script>
  $(window).load(function(){
  $(window).resize(function(){
   var  win = $(window),
       cont = $('div.cont'),
        min = 500;

    if (win.height() <= min){
      cont.height(min);
    } else {
      cont.height(win.height());
    }

 });

});
</script>
</body>
于 2013-03-11T16:50:45.427 回答
0

这就是你所追求的吗？

http://jsfiddle.net/xDczp/5/

.container {height:100%; width:100%;}
.content {height: 100%;}
.content img {height:100%; min-height: 500px; width:100%;}

图片高度不应低于 500 像素。

于 2013-03-11T16:53:11.110 回答