ビューポートが480より小さい場合、画像のソースが変更されます

Question

私はイメージで自分のサイトのヘッダーを作成しています。この画像の高さと幅はそれぞれ100vwと100vhです。問題は、ビューポートが一例として480ピクセルで、画像が変形した場合です。

私は問題私が欲しいの割合で新しいイメージを作成し、ブートストラップでこれをやって解決しようとした：

@media screen and (max-width: 480px) { 
    #imgTOPO::after { 
     content:url("/assets/head_480-01.png"); 
    } 
} 

をしかし、画像が変更されていないと私は問題を理解することはできません。私はこれを解決するために何ができますか？

Answer 1

problremはheight値、幅と高さの両方ですimgのビューポートを埋めるように設定され、アスペクト比をマントインするには、を削除しますまたはheight = autoに設定します。

img { 
 
    width: 100vw; 
 
    height: auto; 
 
}

<img src="https://placeimg.com/640/480/any">

::それは変形の問題を解決していますが、まだ応答性のために、各解像度ごとに異なるイメージをロードしたい場合は、削除してみてくださいsrcsethttps://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/

Answer 2

これは1つの解決策です。

HTML：

<img src="someImg.png" class="largeImg" /> 
<img src="someImg.png" class="smallImg" /> 

はCSS：！

.largeImg { 
    display:block; 
    } 

    .smallImg { 
    display: none; 
    } 

    @media screen and (max-width: 480px) { 
    .largeImg { 
     display: none; 
    } 

    .smallImg { 
    display: block; 
    } 
    } 

私はそれが役に立てば幸い:) @Mariana