Question

我有以下代码：

interface

我将根据不同的屏幕尺寸更改图像。但是，它只显示iPad尺寸。请帮帮我，我在哪里犯错误？

Answer 1

将图像更改为不同分辨率的两个选项。首先是

#upay_image{
  background-image:url("http://www.w3schools.com/css/img_fjords.jpg");
  background-size:100% 100%;
  width:400px;
  height:400px;
  border:1px solid #000;
}

@media(max-width: 768px){
  #upay_image{
  background-image:url("https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/leisa_christmas_false_color.png");
   }
}
@media(max-width: 500px){
  #upay_image{
  background-image:url("http://i.dailymail.co.uk/i/pix/2016/03/08/22/006F877400000258-3482989-image-a-10_1457476109735.jpg");
}
}

<img id="upay_image" src="">

第二个选项是

.Ipad,.Mobile{display:none;}

@media(max-width: 768px){
  .Desktop,.Mobile{
    display:none;
  }
  .Ipad{
    display:block;
  }
}
@media(max-width: 500px){
  .Desktop,.Ipad{
    display:none;
  }
  .Mobile{
    display:block;
  }
}

<img src="http://www.w3schools.com/css/img_fjords.jpg" class="Desktop">
<img   src="https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/leisa_christmas_false_color.png" class="Ipad">
<img src="http://i.dailymail.co.uk/i/pix/2016/03/08/22/006F877400000258-3482989-image-a-10_1457476109735.jpg" class="Mobile">

使用css根据屏幕大小设置不同的图像

1 个答案: