Question

我需要在500像素分辨率下更改html图像。

我在代码片段中看到了三张图片，但在500 px分辨率下我只需要一张图片。我做了媒体查询，我在那里的所有css代码。我试图将移动图像放在另一个设置

的容器中

display: none

一开始。当我在媒体查询时

@media all and (max-width: 500px){..}

我把它设置为

display : inline

但它不起作用。它什么都没显示。我试图设置

#experiential_2_img{
     background: url('images/experiential-insurance_fraud.jpg'); 
     background-size:auto; 
     width:0px; 
     height: 0px;

但它只显示为桌面设置的图像。你能告诉我如何解决这个问题吗？

#experiential_1_img{
    	display: none;
    }
    #experiential_3_img{
    	display: none;
    }
    #experiential_2_img {
    	display: none;
    }
.experiental-container-mobile { display: inline;}

  /*#experiential_2_img {
		    background: url('images/experiential-insurance_fraud.jpg'); 
        background-size:auto; 
        width:0px; 
        height: 0px;
   }*/

<div class="home_thirdrow">
        <div class="experiental-header">
           <a href="http://staging.princetonpartners.com/experiential"> <h3>Experiential</h3> </a>
        </div>
        <div class="experiental-container">
            <img id="experiential_1_img" src="<?php echo get_template_directory_uri(); ?>/images/experiential-amanda_phillies.jpg"
                 alt="Amanda_Phillies">
        </div>
        <div class="experiental-container">
            <img id="experiential_2_img" src="<?php echo get_template_directory_uri(); ?>/images/experiential-philadelphia_zoo.jpg"
                 alt="philadelphia_zoo">
        </div>

        <div class="experiental-container-mobile" style="display: none; ">
            <img id="experiential_2_img" src="<?php echo get_template_directory_uri(); ?>/images/experiential-insurance_fraud.jpg"
                 alt="philadelphia_zoo">
        </div>
        
        <div class="experiental-container">
            <img id="experiential_3_img" src="<?php echo get_template_directory_uri(); ?>/images/experiential-insurance_fraud.jpg"
                 alt="insurance_fraud">
        </div>
    </div>

Answer 1

在这些日子里，最好使用mobile-stylesheet开发您的网站并将其扩展到桌面。

原因：

在Moble上的桌面视图：呕吐：

桌面上的移动视图：确定：

@media screen and (min-width: 768px) {
     #experiential_1_img {
          display: inline;
     }

     #experiential_3_img{
          display: inline;
     }
     #experiential_2_img {
          display: inline;
     }

    .experiental-container-mobile { display: none;}
}

.experiental-container-mobile { display: inline;}

#experiential_1_img{
    display: none;
}
#experiential_3_img{
    display: none;
}
#experiential_2_img {
    display: none;
}

Answer 2

我不知道你是如何进行文件竞争的，但它看起来这是正确的css文件到项目的链接。

在背景图像的路径中，有可能返回上一个文件夹，然后输入图像。

实施例： background：url（'../ images / experiential-insurance_fraud.jpg'）; 。这两点要回到目录。

从css覆盖图像

2 个答案: