1

.container私は柔軟width:100%です。この `.container` に 2 つの縦長の画像 (幅が異なる) を並べて収めたい

<div class="container">
       <p>Some Text</p>
       <img src="this-is-a-landscape-image.jpg" alt="test"/>
       <p> Some Text again</p>
       <img class="portait" src="this-is-a-portrait-image.jpg" alt="test"/>
       <img class="portrait" src="this-is-a-portrait-image.jpg" alt="test"/>
</div>

私が抱えている問題:.container私はこれが柔軟な レスポンシブレイアウトに取り組んでいます- width:100%. .portraitただし、このコンテナに2つの画像( class を持つ)を並べて配置できるようにしたいと考えています。

ここに画像の説明を入力

このサンプル画像でわかるように、2 つの.portrait画像の幅は必ずしも同じではありませんか? 高さを同じにしたいのですが、幅は動的にする必要があります (比率が同じでない場合)

これは純粋なcss（おそらくフレックスボックス）で何とか可能ですか？それとも少しJS？

コンテンツは CMS を介して動的に入力されるため、ハードコードすることはできません。

創造的または役立つアイデアはありますか?

4

3 に答える 3

1

純粋な css に完全に動的なソリューションがあるとは思いません (ただし、間違っていることを証明したいと思います!)

ここに簡単な jQuery ソリューションを書きました: http://jsfiddle.net/d2gSK/2/ 画像サイズ、ウィンドウ サイズ、ガターの幅で遊ぶことができ、高さは両方の画像で同じままにする必要があります。幅はプロポーションに設定されています。

JavaScript は次のようになります。

    // put it in a function so you can easily reuse it elsewhere
    function fitImages(img1, img2, gutter) {
        // turn your images into jQuery objects (so we can use .width() )
        var $img1 = $(img1);
        var $img2 = $(img2);
        // calculate the aspect ratio to maintain proportions
        var ratio1 = $img1.width() / $img1.height();
        var ratio2 = $img2.width() / $img2.height();
        // get the target width of the two images combined, taking the gutter into account
        var targetWidth = $img1.parent().width() - gutter;

        // calculate the new width of each image
        var width1 = targetWidth / (ratio1+ratio2) * ratio1;
        var width2 = targetWidth / (ratio1+ratio2) * ratio2;

        // set width, and height in proportion
        $img1.width(width1);
        $img1.height(width1 / ratio1);
        $img2.width(width2);
        $img2.height(width2 / ratio2);

        // add the gutter
        $img1.css('paddingRight', gutter + 'px');

    }

    //when the DOM is ready
    $(document).ready(function() {
        // cache the image container
        var $wrapper = $('.portrait-wrapper');
        // set the image sizes on load
        fitImages($wrapper.children().get(0), $wrapper.children().get(1), 20);

        // recalculate the image sizes on resize of the window
        $(window).resize(function() {
            fitImages($wrapper.children().get(0), $wrapper.children().get(1), 20);
        });
    });

説明をコード内に入れました。さらに説明が必要な場合は、お気軽にお尋ねください。

私はあなたの画像の周りにラッパーを置き、画像に adisplay: blockと aを与えたことに注意してくださいfloat:left。これは、この作業を行うために必要です!

于 2013-02-13T20:45:33.833 に答える
0

それらに Float を追加して「通常の流れ」から抜け出すか、上部の画像とそれらの間のテキストが常に同じままである場合は絶対位置を使用することもできます...

幅については、単純に幅を % にすることもできるので、疑似クラスを使用して最初のものを 80%、2 番目のものを 20% にすることができます...

別の可能性としては、どのページ幅でどの css を使用したいかを簡単に定義できる別のハード コードされた css を作成することです。たとえば、次のようなものです。

@media screen and (max-width: 400px) {
   .portrait:first {
       width: 85px;
   }

   .portrait:last {
       width: 105px;
   }
}

ウィンドウサイズのすべてのステップについてなど。

私はそれが役立つことを願っています:D

于 2013-02-13T20:18:08.277 に答える
0

このようなことができます。

  <div class="container">
    <p>Some Text</p>
    <img src="this-is-a-landscape-image.jpg" alt="test"/>
    <p> Some Text again</p>
    <div class="portraits">
      <img style="float:left;" class="portait" src="this-is-a-portrait-image.jpg" alt="test"/>
      <img style="float:right;" class="portrait" src="this-is-a-portrait-image.jpg" alt="test"/>
    </div>
  </div>
于 2013-02-13T19:36:42.900 に答える