Question

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

第1列：单张图片，200x150 第2列：由640x150图像组成的图像轮播（＆＃34;光滑＆＃34;库）

所以这里的总最大宽度是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是正在测试的版本）。

有没有人对我在这里失踪的东西有任何想法？

更新：好像＆＃34;位置：绝对＆＃34;图像上的样式是导致IE无法正确调整图像大小的原因。但是仍然不确定如何修复它。

Answer 1

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

＆＃13;

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

＆＃13;

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/

CSS - 响应式并排图像

2 个答案: