CSS-自适应并排图像

Question

我知道我在这里缺少简单的东西-只需要再加上一双眼睛。 我正在处理包含两列的标题：

第1列：单个图像，尺寸为200x150，第2列：由640x150图像组成的图像轮播（“光滑”库）

因此，此处的总最大宽度为840像素。

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

我正在使用W3.CSS样式表，并且已经设置了w3-content和w3-row，但是似乎无法为内部内容找到正确的样式组合。 这里的一般想法是（我将其简化为基本知识）：

<div class="w3-content" style="max-width:840px;">
  <div class="w3-row">
    <div id="logo" style="float:left;width:25%;position:relative;display:block;">
      <span style="position:absolute;top:0%;left:0%;max-width:200px;">
        <img src="logo/logo.png" style="max-width:100%;height:auto;">
      </span>
      <span style="position:absolute;top:0%;left:0%;max-width:175px;">
        <img src="logo/logo2.png" style="max-width:100%;height:auto;">
      </span>
    </div>
    <div id="carousel" style="float:right;width:75%;max-width:640px;">
      <div><img src="1.jpg" style="max-width:100%;height:auto;"></div>
      <div><img src="2.jpg" style="max-width:100%;height:auto;"></div>
      <div><img src="3.jpg" style="max-width:100%;height:auto;"></div>
    </div>
  </div>
</div>

小提琴示例： https : //jsfiddle.net/9ajv244j/2/

现在，我通过在徽标内将多个图像彼此叠加（这部分要求和图像不能合并）来进一步扩展了此功能。 到目前为止，这在Chrome中运行正常，但是徽标中的图像在Internet Explorer中无法缩放（IE 11是正在测试的版本）。

有人对我在这里缺少什么有任何想法吗？

更新：图像上的“ position：absolute”样式似乎是导致IE无法正确调整图像大小的原因。 仍然不确定如何解决它。

Answer 1

@jhilgeman尝试在CSS中进行以下媒体查询：

 @media(max-width: 420px) { #logo{ width:100px !important; height:75px !important; } #carousel{ width:320px !important; height:75px !important; } } 

Answer 2

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

<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>

固定版本： https ： //jsfiddle.net/9ajv244j/7/