如何在流體div中並排顯示具有相同高度的兩個不同高度/寬度比的圖像，它們覆蓋窗口寬度的百分比？

Question

我不確定是否可以這樣做，但是這是如此接近，我無法想象這是不可能的。

我的目標是純CSS / HTML解決方案。 我希望本來高度不同的兩個圖像以相同的高度並排出現。 我希望左邊的圖像覆蓋div的60％，右邊的圖像可以保留剩余的40％（我知道它的寬度小於40％，但不是其確切寬度）。 不管窗口大小如何，該組合都應出現在覆蓋70％窗口寬度的div中。 布局示例兩個圖像都應保留其長寬比。 左上圖顯示了瀏覽器窗口的未縮放圖像，第二個窗口是div覆蓋了大約60％的窗口寬度，圖像以相等的高度顯示，並且無論瀏覽器窗口的寬度如何，這些百分比都應保持不變，因為我試圖在第三和第四圖中顯示。

我嘗試了多種變體，但是如果窗口變得太小，或者圖像僅隨窗口高度縮放，則通常右圖像會包裹在左圖像的下面，這絕對不是我想要的。

Answer 1

這是使用嵌入式樣式表的解決方案的簡單示例：

<!DOCTYPE html>

<html>
<head>
    <title>Stackoverflow Question</title>
    <style>
div {
   height: /*unfortunately cannot be a percentage*/ 200px;
   width: 70%;
}

img.leftimage {
   float: left;
   width: 60%;
   height: 100%;
}

img.rightimage {
   float: right;
   width: 40%;
   height: 100%;
}
    </style>
</head>
<body>
    <div>
        <img src="droids.jpg" class="rightimage" />
        <img src="WinZip.png" class="leftimage" />
    </div>
</body>
</html>

這是一個使用顏色而不是圖像的小提琴，如果很重要，這些是我上面使用的圖像-高度/寬度比明顯不同：

機器人 WinZip

Answer 2

一起乞討乞討和偷竊，我得到了這個工作示例：

<!DOCTYPE html>
<html>
    <head>
    <title>Stackoverflow Question</title>
        <style type="text/css">
            .aspectwrapper {
            display: inline-block; /* shrink to fit */
            width: 40%; /* whatever percentage of window's width you like */
            position: relative; /* so .content can use position: absolute */
            }
            .aspectwrapper::after {
            padding-top: 40%; /* play with this to fit both images in one line */
            display: block;
            content: '';
            }
            .content {
            position: absolute;
            top: 0; bottom: 0; right: 0; left: 0; /* follow the parent's edges */
            outline: thin dashed green; /* just so you can see the box */
            overflow: hidden;
            }
            .images {float: left;}
            img {width: auto;height: 100%;}        
        </style>
    </head>
    <body>
    <div class="aspectwrapper">
        <div class="content">
          <div class="images">                                
            <img src="img1.jpg" />
            <img src="img1.jpg" />
          </div>  
        </div>
    </div>
    </body>
</html>

如何在流體div中並排顯示具有相同高度的兩個不同高度/寬度比的圖像，它們覆蓋窗口寬度的百分比？

問題描述

2 個解決方案

解決方案1
0 2012-11-01 00:00:10

解決方案2
0 2012-11-01 07:10:40

如何在流體div中並排顯示具有相同高度的兩個不同高度/寬度比的圖像，它們覆蓋窗口寬度的百分比？

問題描述

2 個解決方案

解決方案1 0 2012-11-01 00:00:10

解決方案2 0 2012-11-01 07:10:40

解決方案1
0 2012-11-01 00:00:10

解決方案2
0 2012-11-01 07:10:40