Mobil HTML'de bir görüntüyü başka bir yerle değiştirme

Question

Şu anda bir görüntüyü başka bir web sitesiyle değiştirmeyi deniyorum. Görüntüyü yalnızca CSS ile medya sorgularını kullanarak değiştirmeye çalıştım ancak şu anda çalışmıyor. Birisi benim hatamı görmeme yardımcı olabilir, sanırım ebeveyn divilerinden biri değişime izin vermiyor ama emin değilim.

Resmi, koddaki ilk "sol resim" kimliğiyle değiştirmeye çalışıyorum. İşte

HTML kodu aşağıdadır:

<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> 

ve burada hem web sitesi için 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

yeni bir öğe olarak yeni bir resim ekleyin ve masaüstü sürümü ve display: block için display: none set mobil sürüm için. Çünkü img öğesi için background-image'u ayarlayamazsınız! iki tane img kullanmalısın ya da iki tane arka plan olmalı, bir başka arka plan img değil!

#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

ben bunu nasıl bilemez tek yolu

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

nerede 'images/picture.gif' da

bir url koyabilirsiniz olduğunu Eğer bu işe yarayacaksa% 110 im değil ama umarım bu, bir şekilde yardımcı olur