在高度动态的布局中使用srcset和size的可行方法

Question

我一直试图在具有高度动态布局的页面中实现srcset。我想说的是：每张图像都有不同的大小，并且会响应地缩放为不同的大小。一些图像取决于四个断点。
例如（我使用Zurb Foundation）：

<div class="row">
  <div class="xlarge-4 large-6 medium-8 small-12 columns">
    <img srcset="..." />
  </div>
  <div class="xlarge-8 large-6 medium-8 small-12 columns">
    <img srcset="..." />

    <!-- some rows are nested -->
    <div class="row">
      <div class="xlarge-6 large-4 medium-6 small-4 columns">
        <img srcset="..." />
      </div>
      <div class="xlarge-2 large-6 medium-4 small-3 columns">
        <img srcset="..." />
      </div>
    </div>
  </div>
</div>

依此类推。

在没有srcset的情况下使用sizes是不明智的，因为在（x）大屏幕上，它只会始终加载可用的最大图像-不保存任何内容。 但是，事先手动计算图像大小是不可行的，有太多可能的组合无法全部手动计算-这将不在使用网格的地方。

有没有可行的方法让浏览器自行解决？