我有以下代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Media Elements</title>
</head>
<body>
<img id="upay_image" src="" style="width:100%; height:auto;">
</body>
</html>
<style>
@media(min-width: 415px)
{
#upay_image
{
content:url(images/iPadSizeGif.gif);
border:1px solid red;
}
}
@media(max-width: 414px)
{
#upay_image
{
border:1px solid black;
content:url(images/iPhoneSizeGif.gif);
}
}
</style>
我将根据不同的屏幕尺寸更改图像。但是，它只显示 iPad 尺寸。请帮帮我，我哪里做错了？
最佳答案
将图像更改为不同分辨率的两个选项。 首先是
#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">关于html - 使用css根据屏幕尺寸设置不同的图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41498920/