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

fiddle 示例:https://jsfiddle.net/9ajv244j/2/

现在，我通过在 Logo 中将多个图像彼此叠加来更进一步(部分要求和图像无法组合)。到目前为止，这在 Chrome 中运行良好，但 Logo 中的图像在 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;
      }
}