幅を変更せずに固定高さを設定する

画像を特定の高さに留めたいのですが、ユーザーの画面の幅にとどめたいと思っています。ここで幅を変更せずに固定高さを設定する

は、画像のCSSです：

#cafe { 
    max-width: 100%; 
    height: 700px; 
}

ここでは出力です：

出典

2017-01-09 Jordan Baron

問題点は何ですか？ – Banzay

高さが固定されていて、画像をブラウザの幅にしたい場合、画像のアスペクト比は、固定高さとブラウザの幅がアスペクト比でもない限り、歪んでしまいます。それに関して、あなたは大丈夫？あなたが避けたいもののように思えます。 –

設定された高さの2つのオプションがあります。 ** 1）**画像の全幅を表示可能にする必要がある場合は、画像を水平に引き伸ばすことができます。** 2）**画像を伸ばしたくない場合は、画像の一部を隠すことができます水平に'' background-size'を使った[いくつかの例]（https://jsfiddle.net/gzwoer80/）。 – hungerstar

あなたは 'VH' は自動的にユーザーのかかりVIEWPORTの高さを意味し、ここでこの

#cafe { 
    width: 100%; 
    height: 100vh; 
}

を試すことができます画面の高さ。

出典

2017-01-09 19:12:10

これはうまくいきましたが、私はちょっと高さを下げたいと思っています.65歳に変わったら、イメージが伸びているように見えます。 –

@HordanBaronは、設定された高さに可変幅を加えたもので、常に画像を伸ばします。つまり、イメージの一部を隠して、イメージのアスペクト比を維持できるようにしていない場合を除きます。 – hungerstar

はい私はそれをやりたいですが、どうですか？ –

幅を変更せずに固定高さを設定する

答えて

関連する問題