0

サインインしていないときに質問をしたため、以前の質問の回答にコメントできなかったため、これは再投稿です。

画像がブラウザー ウィンドウよりも高くならないようにして、画像の残りの部分を表示するために下にスクロールする必要がないようにしています。

ただし、画像の最大高さをブラウザ ウィンドウの高さに設定する方法がわかりません。

これまでのところ、私は持っています:

<!DOCTYPE html>
 <html>
 <head>
         <meta charset="utf-8">
         <title>TEST TITLE</title>
         <link rel="stylesheet" href="http://flip.hr/css/bootstrap.min.css">
 </head>

<body>

<div class="container">
        <img src="dovelow.jpg" alt="Dove">

</div><!-- .container -->

 </body>
</html>
4

4 に答える 4

0

より良い方法は、好きなものwidthよりも低いものに変更することです100%87%

于 2013-04-18T10:19:25.800 に答える
0

面白いことに、私は同じものを探していました。私のウェブサイトでは、画像が大きくなりすぎないように使用max-height: 75%;していましたが、今日、それが機能しなくなったことに気付きました。おそらく数週間前、あるいは数か月前に機能しなくなりました。それは残念でした。最近の Chrome の更新、またはおそらく WordPress が停止した何かと関係があると思います。

ご存知のように、私のコードが機能しなかった可能性があります。そうだと思っただけです。

とにかく、私は解決策を探していて、かなり落胆しました...この小さな宝石を見つけるまで:

http://stanhub.com/how-to-make-div-element-100-height-of-browser-window-using-css-only/

必要な CSS のビットにはvh、「ビューポートの高さ」またはvw「ビューポートの幅」と呼ばれる単位の使用が含まれていることがわかります。したがって、私の場合、max-height: 75vh;画像がブラウザ ウィンドウの 75% を超えないようにしたい場合は、.

したがって、あなたが計画しているものは何でも、これは確かに役立つはずです.

于 2014-10-28T05:04:02.103 に答える
0

Or画像にクラスを追加します:このフィドルを参照してください

于 2013-04-18T09:53:55.370 に答える