Html CSS-响应并排图像

我知道我错过了一些简单的东西——只需要一双眼睛。我正在处理由两列组成的标题：

第1列：单个图像，200x150 第2列：由640x150个图像组成的图像转盘（“slick”库）

所以这里的总最大宽度是840像素

当浏览器大小缩小到840像素以下时，我希望两列的内容都能平均缩小。因此，在420像素宽的情况下，我预计第1列的图像为100x75，第2列的图像为320x75

我使用的是W3.CSS样式表，我已经设置了W3内容和W3行，但是我似乎找不到适合内部内容的样式组合。这里的总体思路是（我已经把它简化为基本内容）：

小提琴示例：

现在，我将这一点做得更进一步，将多个图像叠加在徽标中（部分需求和图像无法组合）。到目前为止，这在Chrome上运行良好，但徽标内的图像在Internet Explorer中无法缩放（IE 11是正在测试的版本）

有人知道我遗漏了什么吗

---

更新：似乎是图像上的“位置：绝对”样式导致IE无法正确调整图像大小。但仍然不确定如何修复它。

@jhilgeman请在css中尝试以下媒体查询：

@介质（最大宽度：420px）{
#标志{
宽度：100px！重要；
高度：75px！重要；
}
#旋转木马{
宽度：320px！重要；
高度：75px！重要；
}
}

通过完全消除跨距，直接定位图像，我可以重做重叠图像的方式：

<div class="logopics">
  <img src="1.jpg" class="autosize" style="position:absolute; top:0px; left:10px; z-index:0">
  <img src="2.png" class="autosize" style="position:absolute; top:0px; left:20px; z-index:1">
</div>

固定版本：

---

关于你的问题，我看了一遍又一遍，但还是不明白。你能为我们输入一些关于你试图实现的目标的图片吗？@Obink-我已经编辑了这个问题，并添加了一些示例图片。我正在尝试按百分比平滑缩放图片，而不是按固定大小。我只提供了420px分辨率作为一个例子，当缩小到那个大小时，图像大小应该是什么。@ JHIGGMAN，在这种情况下，你可以考虑使用Bootstrap，这将非常容易在任何级别上处理。

<div class="logopics">
  <img src="1.jpg" class="autosize" style="position:absolute; top:0px; left:10px; z-index:0">
  <img src="2.png" class="autosize" style="position:absolute; top:0px; left:20px; z-index:1">
</div>