Javascript srcset属性的响应映像未按预期工作

我正在修复一个ReviewWeb应用程序项目中的一些代码。提交标准之一是使用

srcset

属性使所有站点图像响应。但该网站只是加载了所有视口和屏幕大小的较大图像，我不知道哪里出错了

下面是带有target

img

标记的HTML部分，该部分随后将使用javascript动态构建

<section id="restaurant-container">
    <h1 id="restaurant-name"></h1>
    <img id="restaurant-img">
    <p id="restaurant-cuisine"></p>
    <p id="restaurant-address"></p>
    <table id="restaurant-hours"></table>
</section>

---

在你的电脑上，图像的实际大小是多少？还有餐厅的

imageSizesForRestaurant

，最后一个值是

400px

，而不是

800px

，因为它应该是大：800x600中：600x450小：300x225为什么重要？400px不是仅仅是基于屏幕宽度的图像的插槽大小吗？不是所有这些JS函数，你试过写出简化的HTML吗？也就是说，HTML是这样的：

Srcset足够聪明，可以查看设备像素比率，而不仅仅是视口宽度。你的问题可能只是因为你所有的图像都很小。即使是一个320像素宽的iPhone SE，当你考虑到DPI为2时，也会想要一个640像素宽的图像，这比你的中小型手机要宽，所以它会选择800px的图像。尝试在srcset中添加一个像2000px宽的图像，看看问题是否仍然存在。因为它是不同餐厅的许多页面的模板，每个页面都有自己的图像，因此需要根据需要动态构建。你有什么建议

function imageUrlForRestaurant(restaurant) {
    let url = `/img/${(restaurant.photograph.split('.')[0]||restaurant.id)}-medium.jpg`;
    return url;
  }

function imageSrcsetForRestaurant(restaurant) {
    const imageSrc = `/img/${(restaurant.photograph.split('.')[0]||restaurant.id)}`;
    return `${imageSrc}-small.jpeg 300w,
            ${imageSrc}-medium.jpeg 600w,
            ${imageSrc}-large.jpeg 800w`;
  }

function imageSizesForRestaurant(restaurant) {
    return `(max-width: 360px) 280px,
            (max-width: 600px) 600px,
            400px`;
  }


const image = document.getElementById('restaurant-img');
image.className = 'restaurant-img';
image.src = imageUrlForRestaurant(restaurant);
image.srcset = imageSrcsetForRestaurant(restaurant);
image.sizes = imageSizesForRestaurant(restaurant);