モバイルデバイスとデスクトップデバイスで異なるイメージを表示する方法

Question

こんにちは誰も私のコードは、デスクトップとモバイルデバイスでdiffernetバナーイメージを表示する方法を教えてください。

HTML：私のデスクトップバージョンで今

<div class="row"> 
    <img src="image\bannerimages\Career.png" class="img-responsive careerpage"> 
    <h2 class="careerbannertext">LIFE AT TEKNOTRAIT</h2> 
    <h2 class="careerbannertext1">Are you fanatically driven and ready to take on some of the best challenges the industry has to offer? </h2> 
    <h2 class="careerbannertext2">Come join us,be inspired to do the best work of your life!</h2>  
</div> 

それは私がモバイル版に別の画像を変更する必要があり、この画像を表示しています。例えば

Answer 1

：あなたが試すことができます

.img-responsive.mobile { 
 
    display: none; 
 
} 
 

 
@media only screen and (max-device-width: 480px) { 
 
    .img-responsive { 
 
    display: none; 
 
    } 
 
    .img-responsive.mobile { 
 
    display: block; 
 
    } 
 
}

<div class="row"> 
 
    <img src="image\bannerimages\Career.png" class="img-responsive careerpage"> 
 
    <img src="image\bannerimages\Career-mobile.png" class="img-responsive careerpage mobile"> 
 
    <h2 class="careerbannertext">LIFE AT TEKNOTRAIT</h2> 
 
    ...  
 
</div>

Answer 2

この1：あなたが他のブラウザのデフォルトの画像を置くことができるようにイメージタグがまだそこにある

<picture> 
    <source 
     media="(min-width: 650px)" 
     srcset="images/img1.png"> 
    <source 
     media="(min-width: 465px)" 
     srcset="images/img2.png"> 
    <img src="images/img-default.png" 
    alt="a cute kitten"> 
</picture> 

画像タグをサポートしていません。