Question

我正在尝试仅使用媒体查询加载不同屏幕大小的图像，但它不会显示在div容器中;当我检查浏览器它加载但没有显示。我不知道我做错了什么

这是代码。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
    <title></title>
    <link href="css/test.css" rel="stylesheet">
</head>
<body>
<pre>
    <script src="Jarts.js"></script>

</pre>
<div id="skjd2344jd"></div>

</body>
</html>

这是css

 #skjd2344jd{
    height: 100%;
    width:100%;
}

@media only screen and (min-device-width: 480px){
#skjd2344jd {
   background-image: url("../img/optimal_small.png");
   background-repeat: no-repeat;
     }
}
@media only screen and (min-width: 481px) and (max-width: 1600px) {
#skjd2344jd {
   background-image: url("../img/optimal.png");
   background-repeat: no-repeat;
     }
}

Answer 1

你的身份将占据你身体的100％宽度和高度，但是你没有为你的身体设置尺寸，所以只需增加你身体的高度，不要忘记background-size:cover所以你的代码看起来像{{3} }

使用媒体查询加载不同屏幕尺寸的图像

1 个答案: