2

本体DIVの背景に画像を設定しようとしています。

画像は div に合わせて拡大縮小し、垂直方向と水平方向の中央に配置する必要があります。オーバーフローはすべての面で隠すことができます。

div 内では、すべての辺に 25 ピクセルのパディングが必要であり、内側の div には不透明度 0.2 の背景色があります。

その div 内には、記事が公開されるコンポーネント領域があり、ここでもすべての側面に 25 ピクセルのパディングがあります。

ここで私が抱えている問題を見ることができます: http://betelec.ergonomiq.net/societe/offres-d-emploi#31-01-2013-responsable-de-projet

このページでは、記事はアコーディオンであり、展開すると、背景画像がスペースを埋めるように拡大縮小されず、空白が生じます。

また、このページ: http://betelec.ergonomiq.net/societe/charte

デフォルトの記事の長さは画像の高さよりも長いため、背景は div を埋めるためにスケーリングされず、空白が作成されます。

画像を変更して、必要に応じて利用可能なスペースを埋めるために縮小できる、はるかに大きな画像を配置できます。ただし、画像を並べて表示することはできません。

最後に、内側の div がコンテナーの div を超えているため、コンテンツが右側で途切れています。

私の style.less には、次のコードがあります。

body {
    &.menu-offres-d-emploi,
    &.menu-liens,
    &.menu-envoyer-votre-cv,
    &.menu-collaborateurs,
    &.menu-nous-contacter,
    &.menu-charte,
    &.menu-qui-sommes-nous,
    &.menu-services {
        #rt-main [class*="grid"] {
            & > div.rt-block {
                background-image: url(../images/backgrounds/blur.jpg);
                background-size: cover;
                position: relative;
                background-position: center;
                background-repeat: no-repeat;
                height: 100%;
                width: 100%;
                overflow: hidden;
                margin: 0;
                padding: 25px !important;
                // padding-bottom: 0;
                // margin-bottom: 0;
                & > div#rt-mainbody {
                    background: rgba(0, 168, 143, 0.2) !important;
                    overflow: hidden;
                    color: @white;
                    article.item-page {
                        padding: 25px;
                    }
                }
            }
        }
    }
}

パディングに関しては、以下の 2 つのスクリーンショットで問題がはっきりとわかります。

ご覧のとおり、背景の端 (緑と交わるところ) から の背景色を持つ内側の div まで25px のパディングがあり、 article.item -pagebackground: rgba(0, 168, 143, 0.2) !important;にさらに 25px のパディングがあります。これらは、スクリーンショットに重ねた小さな黄色い線で示されています。ただし、同じパディングが div の右側で機能せず、コンテンツが div にぶつかっています。

div の右端にパディングがありません

ここも同じ

レイアウトはこのモックアップのようになるはずです。

モックアップ

4

1 に答える 1

2

さて、問題を解決しました：

私はlessを次のように変更しました：

body {
    &.menu-offres-d-emploi,
    &.menu-liens,
    &.menu-envoyer-votre-cv,
    &.menu-collaborateurs,
    &.menu-nous-contacter,
    &.menu-charte,
    &.menu-qui-sommes-nous,
    &.menu-services {
        div#rt-main {  // removed " [class*="grid"] "
            & > div.rt-container [class*="rt-grid"] {  //added this new selector level with the portion of code removed from previous line
                & > div.rt-block {
                    background-image: url(../images/backgrounds/blur.jpg);
                    background-size: cover;
                    position: relative;
                    background-position: center;
                    background-repeat: no-repeat;
                    height: 100%;
                    width: auto;
                    overflow: hidden;
                    margin: 0;
                    padding: 25px !important;
                    // padding-bottom: 0;
                    // margin-bottom: 0;
                    & > div#rt-mainbody {
                        background: rgba(0, 168, 143, 0.2) !important;
                        overflow: hidden;
                        color: @white;
                        article.item-page {
                            padding: 25px;
                        }
                    }
                }
            }
        }
    }
}
于 2013-03-06T20:50:37.357 に答える