4

Web サイトで遊んでいるときに、興味深い問題に遭遇しました。

だから私は固定幅の列を含んでいます。これには、1行に多数の画像（今のところ2つ、それが重要かどうかはわかりません）があります。画像のサイズと縦横比は不定で、互いに等しくありません。今、アスペクト比を維持しながら、高さが等しくなり、結合された幅が親コンテナの幅と等しくなるようにサイズを変更しようとしています。また、それに応じてコンテナの高さのサイズを変更します。

私が自分自身を明確にしたことを願っています。

JavaScript などで可能だと思いますが、主に CSS を使用した解決策があるかどうかに関心があります。

ありがとう

4

2 に答える 2

1

それは不可能だと思います。たとえ可能だったとしても、これは私が今まで見た中で最も暗い css ハックになるでしょう (さらに、あまり互換性のない CSS を使用することを意味します)。Javascript を使用すると、はるかに簡単で推奨されます。(編集: jQuery ソリューションについては、これを参照してください: http://jsfiddle.net/martinschaer/aJtdb/ )

しかし、楽しみのために私はこれをしました: http://jsfiddle.net/martinschaer/cGZrF/

これは、必要なものに対して CSS3 でできる最も近いものです。空の垂直スペースを埋める小さなギャップがありますが、すべての画像はコンテナーに収まるように CSS でサイズ変更されます。

.container{
    width: 600px;
    margin: 10px;
    background-color: #000;

    display: box;
    box-orient: horizontal;
    box-pack: center;
    box-align: center;
}

.imgwrapper {
    box-flex: 1;
}

img{
    max-width: 100%;
    height: auto;
    display:block;
}

mozilla および Webkit と互換性のある完全なコードについては、jsfiddle (http://jsfiddle.net/martinschaer/cGZrF/) を参照してください。

編集: jQuery ソリューションについては、これを参照してください: http://jsfiddle.net/martinschaer/aJtdb/

于 2012-06-19T03:40:04.997 に答える