0

私はレスポンシブなワードプレスのテーマに取り組んでいますが、ほとんど問題はありません。マイページには、並べて表示されるいくつかのボックスがあります。各ボックスにはレスポンシブな高さと幅があり、画像とテキストが含まれています (テキストは画像の上に重ねられます)。

正しい縦横比(画像)を考慮して、すべてのボックスを同じ高さに設定する方法はありますか? また、一部のボックスに画像が含まれていない場合はどうなりますか?

ライブプレビュー: http://apu.sh/3ne 

JsFiddle http://jsfiddle.net/tjwHk/
4

1 に答える 1

2

あなたのケースに対する私の提案は、すべてのボックスの幅と高さを好みの値に修正することです。

次に、画像に 100%のmax-width&を付けます。max-height画像の縦横比を失うことなく、親の div [box] からオーバーフローすることはありません。width( &でこれを行おうとするheightと、比率が失われます)

編集： padding:none;無効です。padding:0;代わりに使用

要約すると、 CSSでこれを変更します。

#custom-list .custom-list-element
    {
        width: 50%;
        height: 200px; /* fix any height you want*/
        float: left;
        background-color: #333333;
        text-align: center; /*so the image will always be centered in the div*/
        position: relative;
    }

        #custom-list .custom-list-element img
        {
            max-width: 100%; /* the width never overflow the div*/
            max-height: 100%; /* the height never overflow the div*/
        }
            #custom-list .custom-list-element article p
            {
                padding: 0; /* valid value */
            }

            #custom-list .custom-list-element article h1
            {
                color: #fff;
                padding: 0; /* valid value */
                font-size: 1.5em;
            }

そして最後に、私はフィドルがとても好きなので.. http://jsfiddle.net/avrahamcool/tjwHk/1/

于 2013-09-12T13:25:20.400 に答える