如何在img srcset中为size属性设置正确的断点？

Question

我目前正在研究一个小的React组件，该组件将根据屏幕大小显示不同的图像。但是，我无法确定要为size属性设置的断点。例如，当屏幕的宽度小于500px时，我希望图像图像接近该尺寸。但是我没有。

这是我目前的代码：

import React from 'react';

export const Image = ({ image_path }) => {
  const w92 = `https://image.tmdb.org/t/p/w92${image_path}`;
  const w154 = `https://image.tmdb.org/t/p/w154${image_path}`;
  const w185 = `https://image.tmdb.org/t/p/w185${image_path}`;
  const w342 = `https://image.tmdb.org/t/p/w342${image_path}`;
  const w500 = `https://image.tmdb.org/t/p/w500${image_path}`;
  const w780 = `https://image.tmdb.org/t/p/w780${image_path}`;
  const w2000 = `https://image.tmdb.org/t/p/original${image_path}`;

  return (
    <div>
      <img
        src={w500}
        srcSet={`${w92} 92w, ${w154} 154w, ${w185} 185w, ${w342} 342w, ${w500} 500w, ${w780} 780w, ${w2000} 2000w`}
        sizes={`
        (max-width: 92px) 82px,
        (max-width: 154px) 144px,
        (max-width: 185px) 175px,
        (max-width: 342px) 332px,
        (max-width: 500px) 490px,
        (max-width: 780px) 534px,
        (max-width: 1920px) 880px`}
        alt="poster"
      />
    </div>
  );
};