兩個圖像，一個調整大小，一個不調整大小

我有一個800px div包含並排圖像，第一個是照片，另一個是地圖。由於300px地圖具有細節，使其在縮小尺寸時無法使用，所以我不希望它在小屏幕上調整大小。但是，該照片應無限制地調整大小，而不會強制地圖環繞並出現在其下方。兩個圖像，一個調整大小，一個不調整大小

我猜測，有兩個單獨的容器，這將是更容易，但它可能只有一個容器？目前的代碼是：

.container { 
    width: 800px; 
    max-width: 100%; 
} 
.photo { 
    float: left; 
    max-width: 100%; 
    height: auto; 
} 
.map { 
    float: right; 
    width: 300px; 
    height: 250px; 
} 

<div class="container"> 
    <img class="photo" src="photo.jpg"> 
    <img class="map" src="map.png"> 
</div>

來源

2013-09-27 user604488

你還希望他們並排如果調整屏幕大小？ –

是的，我想要他們並排。顯然，當屏幕尺寸下降到大約400px時，照片的剩餘部分不會太多，但我會簡單地通過媒體查詢使其消失。 – user604488

下面是一個演示：http://codepen.io/theskumar/full/tHwjo

的codepen可以在這裏找到：http://codepen.io/theskumar/pen/tHwjo

使用兄弟wser調整大小以查看效果。

HTML

<div class="container"> 
    <div class="photo"><img src="http://placehold.it/400x400"> </div> 
    <div class="map"><img src="http://placehold.it/300x400"></div> 
</div>

CSS

.container{ 
    position: relative; 

    /* for demo */ 
    width: 90%; 
    margin: 0 auto; 
} 

.photo { 
    margin-right: 300px; 

    /* for demo */ 
    height: 400px; 
    border: 4px solid red; 
} 

.map { 
    position: absolute; 
    right: 0; 
    top: 0; 
    width: 300px; 

    /* for demo */ 
    border: 3px solid blue; 
    height: 400px; 
} 

img { 
    width: 100%; 
    height: 100%; 
}

乾杯，

來源

2013-09-27 19:55:16 Saurabh

謝謝，Saurabh，但我注意到照片（在左邊）調整了寬度，但它不按比例縮小高度。我嘗試將代碼重置爲自動，但沒有成功。 – user604488

我糾正了。我忽略了你創建了兩個獨立的div，一個用於圖像，一個用於地圖。我只是將照片高度更改爲自動，並且您的代碼完全按照我的需要工作。太感謝了。 – user604488

你甚至不需要明確地加上'height：auto'。如果你刪除'height：400px'，它會正常工作，因爲'auto'是默認行爲。你也應該將答案標記爲「接受/正確」，以便其他人來到這裏。乾杯！ – Saurabh

你的代碼可能是

.container { 
    width: 800px; 
    max-width: 100%; 
white-space:nowrap; 
overflow:auto; 
    } 
    .photo { 
     float: left; 
width:calc(100%-300px); 
     max-width: 100%; 
     height: auto; 
    } 
    .map { 
     float: right; 
     width: 300px; 
min-width:300px; 
     height: 250px; 
    } 

<div class="container"> 
    <img class="photo" src="photo.jpg"> 
    <img class="map" src="map.png"> 
</div>

檢查，讓我知道

來源

2013-09-27 19:35:45 Anobik

在考慮跨瀏覽器兼容性時使用'calc'有什麼看法？ – Saurabh

兩個圖像，一個調整大小，一個不調整大小

回答

相關問題