1

私はこのマークアップを持っています:

<div class="girls" style="text-align:center; margin-top:100px">
    <img src="images/1.png" />
    <img src="images/2.png" />
    <img src="images/3.png" />
    <img src="images/4.png" />

そしてこのcss（私はTwitter Bootstrapを使用しています）：

img {

    height: auto;
    max-width: 100%;
    vertical-align: middle;
    border: 0;
    -ms-interpolation-mode: bicubic;

}

画像の幅と高さが等しく、インラインで表示されます。

私の解像度では問題ありません。幅全体 (1366px) に収まりますが、解像度が低いと画像が収まりません。したがって、すべての画面解像度で縦横比を維持する必要があります (私の場合は 1366px 未満)。

このピクチャーフィルを見つけました

これは私にとっては役立つと思いますが、水平方向に表示し、すべての解像度でスケーリングする必要がある4つの画像があるため、私の場合はより簡単なソリューションだと考えています。

ありがとう！

4

2 に答える 2

1

高さを指定せずに、画像のスタイルwidth属性を 25% に設定できます。常に4つの画像を配置し、それらの間の幅が同じで、コンテナdivが常に100％である場合、それは機能します。

HTH

フランシスコ

于 2013-04-04T22:01:20.483 に答える
0

Twitter Bootstrap を使用している場合は、Twitter Bootstrap のドキュメントのようにマークアップを適切に使用してください。

<div class="row-fluid">
    <div class="span3">
        <img src="http://placehold.it/350x400"/>
    </div>
    <div class="span3">
        <img src="http://placehold.it/350x400"/>
    </div>
    <div class="span3">
        <img src="http://placehold.it/350x400"/>
    </div>
    <div class="span3">
        <img src="http://placehold.it/350x400"/>
    </div>
<div>

http://jsfiddle.net/zNLBG/

于 2013-04-04T22:14:15.543 に答える