CSS - 响应式并排图像

我知道我在这里错过了一些简单的东西 - 只需要第二双眼睛。我正在一个由两列的报头：CSS - 响应式并排图像

第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是正在测试的版本）。

有没有人有什么想法我在这里失踪？

更新：似乎在图像上的“位置：绝对”风格是什么导致IE不能正确调整图像的大小。尽管如此，仍然不知道如何解决这个问题。

来源

2017-01-03 jhilgeman

我一遍又一遍地看你的问题，但我仍然不明白。你能为我们输入一些图像，关于你试图达到的目标吗？ – Obink

@Obink - 我编辑了这个问题并添加了一个带有示例图像的小提琴。 – jhilgeman

@jhilgeman试着在你的CSS以下媒体查询：

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

来源

2017-01-03 06:47:24 sanjay

我试图按比例平滑缩放图像，而不是通过固定大小。我只提供了420像素的分辨率，作为缩小到这个尺寸时图像尺寸应该是什么的例子。 – jhilgeman

@jhilgeman在这种情况下，您可能会考虑使用Bootstrap，这在任何级别都很容易处理。 – sanjay

我能重做我被完全消除的跨度和只需直接定位图像重叠的图像的方式：

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

来源

2017-01-04 01:40:37 jhilgeman

CSS - 响应式并排图像

回答

相关问题