ソースコード内で応答する画像のプロパティを適用する

Question

私は2つのバージョンのロゴを作成しました。縦と横の2つのバージョンを作成しました。最初はモバイル画面、もう1つはデスクトップです。残念ながら私はDreamweaverとSublimeの両方のテキストエディタで実装することに失敗しました。私が数時間の研究の後に気づいた唯一のことは、ダミーイメージ（placehold.it）でしか動作しないことです。さらに問題は、ソースイメージを正しく表示すると思われるsrc属性とは対照的に、srcset属性（ブラウザに関係なく何も表示できない）のようです。 どんな種類のヘルプがあれば幸いです！ （コードに従う）

Answer 1

これは、CSSとメディアクエリで最も効果的です。あなたのCSSでは、最初にロゴのモバイル版の画像を設定してから、画面幅が641px以上の場合は別のロゴを使用するように、メディアのクエリで最初のロゴを上書きします。

.logo { 
    height: 50px; 
    width: 100px; 
    background-image: url(images/logo.png); 
    background-repeat: no-repeat; 
    background-position: left top; 
} 

@media screen and (min-width: 641px) { 
.logo { 
    height: 100px; 
    width: 200px; 
    background-image: url(images/logo2.png); 
} 
}