バナー画像のサイズをビューポートの空きスペースに比例して調整します

Google Chromeを使用して900pxの画面を小さくすると、900pxの幅と150pxのバナーが表示されます。これは私が使用していますコードです：バナー画像のサイズをビューポートの空きスペースに比例して調整します

<meta name="viewport" content="width=device-width, initial-scale=1"> .........some other code...... 

.banner { 
    background: silver; 
    padding: 20px 0; 
    max-width: 100%; 
    overflow: auto; 
}

を私が求めているものを達成するための提案でしょうか？

出典

2017-12-05 Tautvydas Daunoravičius

これは現在何が行われていますか？

試行：幅：100％;最大幅：900px

出典

2017-12-05 18:35:17 Tom

全体が銀色の背景であっても、スケールは同じですが、写真は同じ幅のままで、まったく縮尺されないので、全体が縮小されます。テキストがズームアウトされているように小さくなっています。シルバー背景全体の長さと左右の枠線の長さに合わせて写真のサイズを調整したい（境界線で全体のレイアウトを意味します） –

img.banner {width： 100％;最大幅：900ピクセル} – Tom

下記のコードを検討してください。最初に、バナーは幅900pxと高さに設定されています（必要に応じて調整できます）。画面サイズが900pxに達したら、以下に示すように、相対値（％）またはvw（view-width）でバナーの幅を変更できます。それが役に立てば幸い。以下コード例：

#banner{ 
 
width:900px; 
 
} 
 
@media only screen and (max-width: 900px) { 
 
    #banner { 
 
    width: 90%; 
 
    } 
 
}

<img id="banner" src="https://d33wubrfki0l68.cloudfront.net/557d279498d303f3206fae0af97a62f3625ebf4e/c3c0d/images/header/leargas-banner-900px.png"/>

出典

2017-12-05 18:37:18

私の問題は、私はそれが説明書に不明であった、.bannerのみを参照しました。私が書いたときには .banner img {max-width: 100%}となりました。 overflowをmaxwidthと削除したものが.bannerであった。

出典

2017-12-05 18:52:38

バナー画像のサイズをビューポートの空きスペースに比例して調整します

答えて

関連する問題