1

流動的な幅のコンテナーに画像の行があり、画像間に固定幅のスペースがあります。コンテナが縮小した場合、画像は流動的にサイズ変更され、コンテナの幅全体に収まる必要があります。

このために、空白を使用しています: nowrap; および表示: テーブル。コンテナとディスプレイ: table-cell; その子に。

ただし、画像はさまざまな要因でスケーリングされているように見えるため、非常に小さい画像もあれば、わずかに小さい画像もあります。比例してスケーリングする必要がありますが、方法がわかりません。どんな助けでも大歓迎です！

HTML:

<div class="container">
    <div class="row">
        <div class="fluid-width-fixed-space col-xs-12 col-sm-8 col-md-10 col-lg-12">
      <div>
        <div class="inner"><img src="http://vriesia.greyhat.nl/prospect/image/demobeeldgroep-andrelon/andrelon-1.jpg" alt=""></div></div><div><div class="inner"><img src="http://vriesia.greyhat.nl/prospect/image/demobeeldgroep-andrelon/andrelon-2.jpg" alt=""></div></div><div><div class="inner"><img src="http://vriesia.greyhat.nl/prospect/image/demobeeldgroep-andrelon/andrelon-3.jpg" alt=""></div></div><div><div class="inner"><img src="http://vriesia.greyhat.nl/prospect/image/demobeeldgroep-andrelon/andrelon-4.jpg" alt=""></div></div><div><div class="inner"><img src="http://vriesia.greyhat.nl/prospect/image/demobeeldgroep-andrelon/andrelon-5.jpg" alt=""></div></div><div><div class="inner"><img src="http://vriesia.greyhat.nl/prospect/image/demobeeldgroep-andrelon/andrelon-6.jpg" alt=""></div>        </div>
     </div>
    </div>
</div>

CSS:

.fluid-width-fixed-space
{
        white-space: nowrap;
        display: table;
}
.fluid-width-fixed-space > div
{
        display: table-cell;
}
.fluid-width-fixed-space img
{
        display: inline-block;
        max-width: 100%;
        height: auto;
        border: 1px solid #000;
        vertical-align: baseline;
}
.fluid-width-fixed-space > div .inner
{
        margin-right: 50px;
}

ライブ デモについては、このペンを参照してください: http://codepen.io/anon/pen/PZPjop

4

1 に答える 1

1

私が見ることができるように、ここでの問題はこれにあります：

.fluid-width-fixed-space > div .inner
{
        margin-right: 50px;
}

小さな画面サイズでは、そのマージンは大きすぎます。そのため、画面サイズに基づいてマージンを小さくするか、小さな画面ではすべての画像の幅を 100% にします。

于 2015-12-12T21:41:41.703 に答える