CSS - 反応的なサイドバイサイド画像

Question

私はここでは何かが欠けていることを知っています。

カラム1：単一の画像、200×150 カラム2：画像カルーセル（「滑らかな」ライブラリ）640x150画像

から成るだから合計Iは、2つの列で構成され、ヘッダに取り組んでい最大幅は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はテスト対象のバージョンです）。

私はここに何が欠けているのですか？

更新：イメージの「位置：絶対」スタイルは、イメージのサイズを適切に変更しない原因になっているようです。しかし、それを修正する方法はまだ分かりません。

Answer 1

はあなたのCSSメディアクエリを、次の試してみてください@jhilgeman：

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