1

グリッドにきれいに表示したい画像がたくさんあります。実際、画像はほぼ正方形です (ただし、一部の画像は高さがピクセル単位でずれています)。

css を介して固定の幅と高さを設定するのは明らかに簡単ですが、コンテナーの幅に合わせてスケーリングしたいと考えています。

それらをテーブルに配置します（またはインラインdiv内-問題には関係ありません） img.width:100% はここでは役に立ちません。高さもスケーリングするため、すべての画像の高さが異なります。img.height:100% を設定しても、もはや正方形ではないため、役に立ちません。

私はついにこれをcoffescriptで調整することになりました。しかし、私の質問は、純粋な css でこれを達成する方法が本当にないかどうかです。

私の解決策は、.square_all をマーカーとしてコンテナーにアタッチし、コンテナーの最初の画像の幅を取得して、それをコンテナー内のすべての画像の高さとして設定することです。

フィールドテストされていません、私にとってはうまくいきます

square_all.coffee:

#
# make all images in a group the same height as the first's width
#
$ ->
    square_all  = ->
        size   = $('.square_all').each (index, element) ->
            imgs    = $(element).find('img')
            size    = imgs.first().width()
            imgs.height size
            true
    square_all()
    $(window).bind 'resize', (event) -> square_all()

サイドノート：

imgs の幅も size に設定したくなるかもしれませんが、これはうまくいきません。画像は width:100% ではなく固定幅になるため、コンテナーの幅に合わせて調整されなくなります。

私の環境では、すべて同じ幅になるように画像の幅を縮小しますが、高さは比例して拡大縮小します。

このソリューションでは高さは気にしません。高さをスケーリングするだけです。他のコンテキストでは、高さをトリミングする方が適切な場合があります。

4

1 に答える 1

0

パーセンテージとdivタイプの行を使用して、純粋なcssでそれを行います

デモhttp://jsfiddle.net/kevinPHPkevin/R8Rrf/

.row {
    width:100%;
}
img {
    width:18%;
    max-width:100px;
}
于 2013-08-02T22:02:44.683 に答える