调整大小的图像的尺寸依赖性解决方案

Question

我有一个卡片容器，其中包含标题和内容。内容应使用卡的剩余空间，并在图像的左侧具有覆盖层，并在图像的右侧具有其他内容。

我试图形象化这一点：

.card {
  display: flex;
  flex-direction: column;
  width: 600px;
  height: 200px;
  margin: 20px;
  border: 1px solid green;
}

.line {
  display: flex;
  height: 100%;
  align-items: center;
}

.forcesize {
  position: relative;
  flex-grow: 1;
  min-height: 0;
}

.flexline {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

.relpos {
  position: relative;
  height: 100%;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient( 45deg, #0f0, #0f0 10px, #f00 10px, #f00 20px);
  opacity: 0.1;
}

img {
  height: 100%;
}

span {
  background-color: yellow;
  flex: 1 0 100px;
}

<div class="card">
  <div class="line">
    <img src="http://via.placeholder.com/400x400" />
    <span>other things</span>
  </div>
</div>
<div class="card">
  <div class="line">
    <div class="relpos">
      <img src="http://via.placeholder.com/400x400" />
      <div class="overlay"></div>
    </div>
    <span>other things</span>
  </div>
</div>
<div class="card">
  <h3>Heading</h3>
  <div class="forcesize">
    <div class="flexline">
      <img src="http://via.placeholder.com/400x400" />
      <span>other things</span>
    </div>
  </div>
</div>
<div class="card">
  <h3>Heading</h3>
  <div class="forcesize">
    <div class="flexline">
      <div class="relpos">
        <img src="http://via.placeholder.com/400x400" />
        <div class="overlay"></div>
      </div>
      <span>other things</span>
    </div>
  </div>
</div>

前三张卡在所有浏览器中均可使用，在第四张卡中，relpos容器的chrome和edge宽度为0，firefox的原始图像宽度为（400px）。

我知道图像的高度取决于容器的高度，而容器的宽度取决于图像的宽度，因此整个方法可能是错误的。但我也想避免对大小进行硬编码。在所有浏览器中都能获得相似布局的最佳方法是什么？