1

画面の幅に関係なく、特定の固定高さで画像が全幅で表示される（または画面を水平に完全に覆う）ようにするにはどうすればよいでしょうか。を設定するwidth: 100%;と、height: auto;明らかに高さが画面の幅に応じて変動します。画面が狭い場合、画像が部分的にしか表示されなくても問題ありません。何か案は？

編集: ここに良い例があります: http://www.teamnine.ch

ブラウザ ウィンドウのサイズを変更して、私の言いたいことを確認してください。

4

3 に答える 3

2

min-heightソース Web サイトから、プロパティ セットがあることは明らかです。したがって、そのような結果が得られます。目的のページでも、imgタグに次の CSS を試してください。

img {
    min-height: 100%;
    min-width: 1400px;
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}
于 2013-01-15T22:30:24.217 に答える
2

上記 (リンク) の Web サイトでは、100% ではなく100vhの高さを使用していると思います。

100vh は、画像を引き伸ばすことなく、ウィンドウ全体の高さを取得します。追加すると (たとえば 50vh)、画像はウィンドウの半分になります。パーセントを使うのと少し似ていますが、ここでは vh を使うのが正しい方法だと思います。

ヘッダーをそのようにしたい場合は、これを試してください。

header {
   background-image: (image.jpg); 
   height: 100vh; 
   background-size: cover;
}

ヘッダー内のすべての要素を中央に配置する方法は次のとおりです (問題のリンクのように)。

header {
    background-image: (image.jpg); 
    height :100vh; 
    background-size: cover; 
    display: flex; 
    flex-direction: column; 
    justify-content: centre; 
    alighn-items: centre; 
}
于 2016-07-02T18:47:03.597 に答える
0

画像をdivでラップできます：

CSS:

<style type="text/css">
div.outer {
    width:100%;
    height:125px;
    overflow:hidden;
}
img {
    width:100%;
    height:auto;
}
</style>

HTML:

<div class="outer">
    <img src="inner.jpg">
</div>
于 2013-01-15T21:42:50.750 に答える