1

我不确定我是否可以做到这一点，但这是如此接近，我无法想象这是不可能的。

我的目标是纯 CSS/HTML 解决方案。我希望两个具有不同高度的图像以相同的高度并排出现。我希望左边的图像覆盖 60% 的 div，右边的图像可以有剩余的 40%（我知道它的宽度会小于 40%，但不是它的确切宽度）。无论窗口大小如何，组合都应出现在覆盖窗口宽度 70% 的 div 中。布局示例 两个图像都应保持其纵横比。左上图显示了一个带有未缩放图像的浏览器窗口，第二个是 div 覆盖了大约 60% 的窗口宽度，图像以相等的高度显示，并且无论浏览器窗口宽度如何，这些百分比都应该保持不变，如我试图在第三张和第四张图中显示。

我尝试了许多变化，但如果窗口变得太小，右图像通常会包裹在左图像下方，或者图像仅随窗口高度缩放，这绝对不是我想要的。

4

2 回答 2

0

Kitting the beg borrow and steal together, I get this working example:

<!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>
于 2012-11-01T07:10:40.927 回答
0

这是我的解决方案的一个简单示例，使用嵌入式样式表： 

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

于 2012-11-01T00:00:10.847 回答