モバイルHTMLで画像を別の画像に置き換える

Question

現在、モバイル版のウェブサイトでのみ画像を別の画像に置き換えようとしています。 CSSを使ったメディアクエリだけを使ってイメージを変更しようとしましたが、現在は動作していません。誰かが私の間違いに気づくのを助けることができる、私は親のdivの1つが変更を許可しないが、私は確信していないと思う。

コードの最初のID「left-image」でイメージを置き換えようとしています。ここで

はHTMLコードです：

<div class="container-fluid"> 
      <div class="row " id= "faded"> 
         <img src = "img/logo.png" class ="img-responsive" id = "logo"> 


       <div class = "col-md-3 col-sm-3 col-xs-12" > 

       <img src = "img/1.jpg" class = "img-responsive" id ="left-image"> 
         <div class = "carousel-caption" id = "pricing"> 
          <h3>PRICING</h3> 
         </div> 

         <div class = "text"> 
          HAIRCUT $60<br> 
          SHAVE  $30<br> 
          COMBO  $80<br> 
         </div> 

       </div> 

       <div class = "col-md-6 col-sm-6 col-xs-12"> 

       <img src = "img/2.jpg" class = "img-responsive" id = "middle-image"> 
       <div class ="carousel-caption" id = "about-us"> 
        <h3> ABOUT US </h3> 
       </div> 

        <div class = "text-third"> 
        <p>FADED IS HERE AND WE'RE BRINGING YOU<br> 
         THE BEST BARBERS FROM ACROSS THE COUNTRY.<br> 
         COME EXPERIENCE THE DIFFERENCE FOR YOURSELF</p> 
        </div> 

       <a href="mailto:concierge@faded.la"> 
       <img src = "img/3.jpg" class = "img-responsive" id= "mid-image"> 
        <div class ="carousel-caption" id = "contact-us"> 
        <h3> CONTACT US </h3> 
       </div> 
         <div class = "text-second"> 
         <p>5819 W 4TH ST.<br> 
         LOS ANGELES, CA 90036<br><br> 
         CONCIERGE@FADED.COM<br> 
         310.123.4567</p> 
         </div> 
       </a> 
       </div> 


       <a href = "https://squareup.com/appointments/book/WBBT3O/faded"> 
       <div class = " col-md-3 col-sm-3 col-xs-12"> 
        <img src = "img/4.jpg" class = "img-responsive" id = "right-image"> 
        <div class ="carousel-caption" id = "appointments"> 
        <h3> APPOINTMENTS </h3> 
        </div> 
          <div class ="text-four"> 
             CLICK HERE TO<br> 
             GET FADED 

          </div> 

       </div> 
       </a> 

      </div> 
</div> 

、ここでは、同様に、ウェブサイトのためのCSSです：

@media only screen and (max-width: 800px) { 

     .text, .text-second, .text-four{ 
     font-size:1em; 
     } 

     .text-third{ 
      font-size:0.8em; 
     } 

     h2, h3{ 
      font-size:15px; 
     } 

     #logo{ 
      width: 25%; 
     } 

      #pricing{ 
     bottom:83%; 
     left:-30%; 
     font-size:2.5em; 

     } 

     #about-us{ 
     bottom:83%; 
     left: -55%; 
     } 

     #contact-us{ 
     bottom: 34%; 
     right:-53%; 
     } 

     #appointments{ 
     bottom:83%; 
     right:25%; 
     } 
} 

@media only screen and (max width: 480px) and (max width: 640px){ 
    #left-image{ 
    background-image: url("img/mobile/mobile1.jpg"); 

    } 

} 

Answer 1

は、新しい要素として、新たな画像を追加し、デスクトップ版とdisplay: blockためdisplay: noneを設定しますモバイル版。 img要素にbackground-imageを設定することはできません。あなたは2つを使用する必要がありますimgまたは2つはバックグラウンドでなければなりませんimgもう一つの背景！

#left-imageNew { 
 
    display: none; 
 
} 
 
@media only screen and (max-width: 800px) { 
 
    .text, 
 
    .text-second, 
 
    .text-four { 
 
    font-size: 1em; 
 
    } 
 
    .text-third { 
 
    font-size: 0.8em; 
 
    } 
 
    h2, 
 
    h3 { 
 
    font-size: 15px; 
 
    } 
 
    #logo { 
 
    width: 25%; 
 
    } 
 
    #pricing { 
 
    bottom: 83%; 
 
    left: -30%; 
 
    font-size: 2.5em; 
 
    } 
 
    #about-us { 
 
    bottom: 83%; 
 
    left: -55%; 
 
    } 
 
    #contact-us { 
 
    bottom: 34%; 
 
    right: -53%; 
 
    } 
 
    #appointments { 
 
    bottom: 83%; 
 
    right: 25%; 
 
    } 
 
} 
 
@media only screen and (max-width: 480px) and (max-width: 640px) { 
 
    #left-imageNew { 
 
    display: bloack; 
 
    } 
 
    #left-image { 
 
    display: none; 
 
    } 
 
}

<div class="container-fluid"> 
 
    <div class="row " id="faded"> 
 
    <img src="img/logo.png" class="img-responsive" id="logo"> 
 

 

 
    <div class="col-md-3 col-sm-3 col-xs-12"> 
 
     <img src="img/1.jpg" class="img-responsive" id="left-imageNew"> 
 
     <img src="img/1.jpg" class="img-responsive" id="left-image"> 
 
     <div class="carousel-caption" id="pricing"> 
 
     <h3>PRICING</h3> 
 
     </div> 
 

 
     <div class="text"> 
 
     HAIRCUT $60 
 
     <br>SHAVE $30 
 
     <br>COMBO $80 
 
     <br> 
 
     </div> 
 

 
    </div> 
 

 
    <div class="col-md-6 col-sm-6 col-xs-12"> 
 

 
     <img src="img/2.jpg" class="img-responsive" id="middle-image"> 
 
     <div class="carousel-caption" id="about-us"> 
 
     <h3> ABOUT US </h3> 
 
     </div> 
 

 
     <div class="text-third"> 
 
     <p>FADED IS HERE AND WE'RE BRINGING YOU 
 
      <br>THE BEST BARBERS FROM ACROSS THE COUNTRY. 
 
      <br>COME EXPERIENCE THE DIFFERENCE FOR YOURSELF</p> 
 
     </div> 
 

 
     <a href="mailto:concierge@faded.la"> 
 
     <img src="img/3.jpg" class="img-responsive" id="mid-image"> 
 
     <div class="carousel-caption" id="contact-us"> 
 
      <h3> CONTACT US </h3> 
 
     </div> 
 
     <div class="text-second"> 
 
      <p>5819 W 4TH ST. 
 
      <br>LOS ANGELES, CA 90036 
 
      <br> 
 
      <br>CONCIERGE@FADED.COM 
 
      <br>310.123.4567 
 
      </p> 
 
     </div> 
 
     </a> 
 
    </div> 
 

 

 
    <a href="https://squareup.com/appointments/book/WBBT3O/faded"> 
 
     <div class=" col-md-3 col-sm-3 col-xs-12"> 
 
     <img src="img/4.jpg" class="img-responsive" id="right-image"> 
 
     <div class="carousel-caption" id="appointments"> 
 
      <h3> APPOINTMENTS </h3> 
 
     </div> 
 
     <div class="text-four"> 
 
      CLICK HERE TO 
 
      <br>GET FADED 
 

 
     </div> 
 

 
     </div> 
 
    </a> 
 

 
    </div> 
 
</div>

Answer 2

私はこれを行う方法を知っているだろう唯一の方法は、あなたが '画像/ picture.gif' はまた

されているURLを置くことができます

<script> 
$(window).resize(function(){ 
if ($(window).width() <= 800){ 
$('.middle-image').attr('src', 'images/picture.gif'); 
} 
}); 
</script> 

です私はこれがうまくいけば110％ではないが、これは何らかの形で役に立つと思う。