小编Alt*_*nge的帖子

我一直在搜索响应式图像帖子和示例，但找不到解决方案。看起来这应该很容易，我可能只是错过了一些东西：我如何根据容器宽度而不是屏幕宽度提供适当的图像大小？

即我有一个桌面屏幕，1980px 宽，但弹性容器是屏幕的 1/3，因此最大图像尺寸只需为 660px 宽，因此它应该显示 800w 图像。但 srcset 只会超出屏幕尺寸，所以即使我显示缩略图，它也会加载 1200w 的图像。有没有办法动态地做到这一点。即仍然使用 flebox 和动态宽度，但它是否根据容器宽度而不是屏幕宽度提供适当的尺寸？任何帮助将不胜感激，谢谢！

<div class="flex justify-center w-1/3 mx-auto">
<img
  srcset=" srcset="size-1.jpg 400w,
  size-2.jpg 800w,
  size-3.jpg 1200w,"
  sizes=" (min-width: 1200px) 1200px, (min-width: 800px) 800px, 400px"
/></div>

尝试使用 Cheerio 拉取 img 源，但 img 没有类。看起来像

<div class="container_c89a5 lazyLoadContainer_b1038">
<img height="80" src="https://stuff.com" srcset="https://stuff.com" width="80">
</div>

我试过以几种不同的方式选择图像源，但没有运气。

var $ = cheerio.load(html);
    $('div.item_54fdd').each(function(i, element) {
        var a = $(this);
        var title = a.find('.title_9ddaf').text(); //works great
        var image = a.find('div.container_c89a5').first('img').attr('src');  //no luck
        var image = a.find('div.container_c89a5 > img').attr('src');  //no luck

我认为 commonjs 插件可以让您使用较旧的模块，但我无法让 rollup 与https://www.npmjs.com/package/create-hmac一起使用。这是一个较旧的模块，据我所知我需要使用：

const createHmac = require("create-hmac");

我无法使用导入。有什么方法可以将其与汇总一起使用，还是我运气不好？我正在使用标准的 Svelte rollup 模板，并尝试使用namedExports、dynamicRequireTargets、不同的 Resolve 设置等。如果任何真正了解 rollup 的人可以帮助我，我将不胜感激！