Question

我的目标是创建一个占据窗口高度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。

Answer 1

如何为图像提供min-height而不是容器？

Answer 2

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

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

基本上，你缺少的是身高{100}在根标签上是<html>。所有父母都必须有这个设置才能工作，除了<html>的根元素之外，你所做的一切都已经完成了。

UPDATE：

http://jsfiddle.net/jDk3s/

添加了min-height：继承图像以使其适用于chrome。它也可以通过删除 IMG的父div上的最小高度来修复（但不确定你是否真的需要它）..所以你可以选择其中一种方式。 / p>

Answer 3

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

<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>

Answer 4

这就是你要追求的吗？

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

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

图像高度不应低于500px。

css - 100％高度，像素最小高度

4 个答案:

UPDATE：