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 - 響應式並排圖像

回答

相關問題