用移动设备上的另一个图像替换一个图像HTML

我目前正试图用只有移动版本的网站上的图像替换另一图像。我试图改变图像只使用CSS媒体查询，但目前不工作。有人可以帮助我发现我的错误，我认为是其中一个母公司不允许更改，但我不确定。用移动设备上的另一个图像替换一个图像HTML

我试图用代码中的第一个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:[email protected]"> 
       <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> 
         [email protected]<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"); 

    } 

}

来源

2016-03-24 ZombieChowder

'max widt h'应该是'max-width'。更改'max width：480px）和（最大宽度：640px' ==>'max-width：480px）和（max-width：640px' – Tushar

'！= background-image' – putvande

进行了更改，但图像仍然是移动设备也一样。 – ZombieChowder

添加新的形象，新的元素和桌面版和display: block设置display: none为移动版本。因为您不能为img元素设置background-image！你应该使用两个img或两个必须是背景不是一个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:[email protected]"> 
 
     <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>[email protected] 
 
      <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>

来源

2016-03-24 14:12:49 Pedram

我知道如何做到这一点的唯一方法是

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

，你可以把一个网址， '图像/ picture.gif' 也是

即时消息不是110％，如果这将工作，但我希望这在某种程度上有所帮助

来源

2016-03-24 14:28:26 joeswebdevtips

用移动设备上的另一个图像替换一个图像HTML

回答

相关问题