1

これができるかどうかはわかりませんが、非常に近いので、不可能だとは想像できません。

純粋な CSS/HTML ソリューションを目指しています。元々高さが異なる 2 つの画像を同じ高さで並べて表示したい。左の画像で div の 60% をカバーし、右の画像で残りの 40% をカバーすることができます (幅が 40% 未満になることはわかっていますが、正確な幅ではありません)。コンボは、ウィンドウのサイズに関係なく、ウィンドウ幅の 70% をカバーする div に表示する必要があります。レイアウトの例 どちらの画像も縦横比を維持する必要があります。上の左の図は、スケーリングされていない画像を含むブラウザー ウィンドウを示しています。2 つ目は、div がウィンドウ幅の約 60% をカバーし、画像が同じ高さで表示されている場所です。ブラウザー ウィンドウの幅に関係なく、これらのパーセンテージは変更されません。 3番目と4番目の図で示してみました。

私は多くのバリエーションを試しましたが、ウィンドウが小さすぎると、右の画像が左の画像の下に折り返されることがよくあります。

4

2 に答える 2

0

物乞いを借りて盗むことを一緒にすると、私はこの実用的な例を手に入れます：

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

これは、画像の代わりに色を使用したフィドルです。重要な場合、これらは私が上で使用した画像です-明らかに異なる高さと幅の比率:

ドロイド ウィンジップ

于 2012-11-01T00:00:10.847 に答える