Question

所以应该发生的是，在网站加载时，它会检测屏幕的大小。使用可以让我通过像素大小查询屏幕的宽度，并以此来决定要使用哪个图像。因此，我的目标是在手机上显示较低分辨率的图像，在计算机上显示较高分辨率的图像。但是出于某种原因，它一直使用默认图像（最低分辨率）。

这是有问题的重新链接： https://midterm-for-ist113-19s-ce--malfetes.repl.co/home.html

我已经遍历了教科书，因此可以肯定我的用法是正确的。但是我对HTML不太熟悉，所以不确定是否缺少一些关键值。

文件名是准确的，因为我已经使用img测试了它们。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    
  </head>
  <body>
    <header>
      <picture>
        <source media="(max-width:480px)"
        srcset="title card resized.jpg">
        <source media="(min-width:769px)"
        srcset="title card.jpg">
        <img alt="..." src="title card resized.jpg">
      </picture>
      <nav>
        <ul>
          <li><a href="food.html">Food</a></li>
          <li><a href="home.html">Home</a></li>
          <li><a href="map.html">Map</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <h1>
        So, you're new to the area?
      </h1>
      <section>
        So you've just started school here at good ol' NHTI. Well you're gonna need to know your way around!
      </section>
    </main>
    <script src="script.js"></script>
  </body>
</html>

目标：PC上的高分辨率图像，移动设备上的高分辨率图像。实际情况：默认的低分辨率图像显示

Answer 1

使用最小宽度

<picture>
  <source media="(min-width: 650px)" srcset="http://uupload.ir/files/vvjs_hi-res.jpg">
  <img src="http://uupload.ir/files/m9a_low-res.jpg" style="width:auto;">
</picture>

上面的代码在小于649px的屏幕上显示低分辨率，在大于649px的屏幕上显示高分辨率。

Answer 2

该问题已通过删除名称中的空格而得以解决。感谢@Andu_Andrici指出这一点。

如何使某些图像以某些屏幕尺寸显示？

2 个答案: