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 を追加して、クロムで動作するようにしました。また、IMG の親 div の min-height を削除することで修正できた可能性もあります(ただし、本当に必要かどうかは不明です)。そのため、いずれかの方法を選択できます。

于 2013-03-11T16:24:23.347 に答える
0

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>
于 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%;}

画像の高さが 500px を下回らないようにしてください。

于 2013-03-11T16:53:11.110 に答える