0

私は以下のcssを持っています。私が欲しいのは、一種の流体/液体(適切な用語がないため) css です。私はモバイル向けに開発を行っていますが、ポートレート ビューからランド ビューにモードを変更したときに、スムーズに流れるようにしたいと考えています。今の画像は

<div class="parentDivision-separator-middle" style="margin-top: 3px;"><div class="image childDivision7"></div>

ランド ビューではうまく機能しますが、ポートレート ビューでは区切り画像の後に多くのスペースが残ります。css から !important を取り出すと、画像が途切れ始めます。昨日からふざけてました。どんな助けでも大歓迎です

<style>

    div.parentDivision {
        margin-top:2px;
    }
    div.parentDivision div {
        height:281px;
        background-size: 100%;
        background-repeat: no-repeat;
    }

    @media screen and (max-width: 480px) {
        div.parentDivision div {
            height:151px;
            background-size: 100%;
            background-repeat: no-repeat;
        }
        div.parentDivision-separator-middle {
            height:151px ;
            background-size: 100%;
            background-repeat: no-repeat;
        }
    }
    @media screen and (max-width: 320px) {
        div.parentDivision div {
            height:151px !important;
            background-size: 100%;
            background-repeat: no-repeat;
        }
        div.parentDivision-separator-middle {
            height:151px  !important;
            background-size: 100%;
            background-repeat: no-repeat;
        }

    }
    div.parentDivision-separator-middle {
        height:165px  !important;
        background-size: 100%;
        background-repeat: no-repeat;
    }
    div.parentDivision .childDivision1 {
        background-image:url(http://www.bryantsmith.com/blog/wp-content/uploads/2011/10/cssediter1.png);
    }
    div.parentDivision .childDivision2 {
        background-image:url(http://www.bryantsmith.com/blog/wp-content/uploads/2011/10/cssediter1.png);
    }
    div.parentDivision .childDivision3 {
        background-image:url(http://www.bryantsmith.com/blog/wp-content/uploads/2011/10/cssediter1.png);
    }
    div.parentDivision .childDivision4 {
        background-image:url(http://www.bryantsmith.com/blog/wp-content/uploads/2011/10/cssediter1.png);
    }
    div.parentDivision .childDivision5 {
        background-image:url(http://www.bryantsmith.com/blog/wp-content/uploads/2011/10/cssediter1.png);
    }
    div.parentDivision .childDivision6 {
        background-image:url(http://www.bryantsmith.com/blog/wp-content/uploads/2011/10/cssediter1.png);
    }
    div.parentDivision .childDivision7 {
        background-image:url(http://www.bryantsmith.com/blog/wp-content/uploads/2011/10/cssediter1.png);
    }
    div.image {
        margin: 1px;
    }
    div.parentDivision-separator-left {
        float: left;
        width: 49%;
        overflow: hidden;
    }
    div.parentDivision-separator-right {
        float: left;
        width: 49%;
        overflow: hidden;
        margin-left: 2%;
    }

    div.parentDivision-separator-middle {
        float: left;
        width: 100%;
        overflow: hidden;
    }
    div.parentDivision-separator div.image {
        padding: 2px;
    }



</style>


<div class="list-wrapper parentDivision">
    <div class="parentDivision-separator-left"><div class="image childDivision1"></div></div>
    <div class="parentDivision-separator-right"><div class="image childDivision2"></div></div>
</div>
<div class="list-wrapper parentDivision">
    <div class="parentDivision-separator-middle" style="margin-top: 3px;"><div class="image childDivision7"></div></div>
</div>
<div class="list-wrapper parentDivision">
    <div class="parentDivision-separator-left"><div class="image childDivision3"></div></div>
    <div class="parentDivision-separator-right"><div class="image childDivision4"></div></div></div>
</div>
<div class="list-wrapper parentDivision">
    <div class="parentDivision-separator-middle" style="margin-top: 3px;"><div class="image childDivision7"></div></div>
</div>
<div class="list-wrapper parentDivision">
    <div class="parentDivision-separator-left"><div class="image childDivision5"></div></div>
    <div class="parentDivision-separator-right"><div class="image childDivision6"></div></div>
</div>

ここにjsfiddleがあります

http://jsfiddle.net/yYSke/

ブラウザを大きくしたり小さくしたりすると、画像が途切れるのがわかります

4

1 に答える 1

0

縦向きでも横向きでも、画像が切り取られていることがわかります（重要な高さが含まれています）。隙間も見当たりません。

以下はあなたが望むものですか？http://jsfiddle.net/yYSke/2/show/

まず、背景画像を高さ 100% に変更し、縦横比を維持するために幅を自動に設定しました。次に、それらを要素の中央に配置するように設定します。

div.parentDivision div {
    height:281px;
    background-size: auto 100%;
    background-repeat: no-repeat;
     background-position: center;
}

また、基本スタイルに既にあるものを繰り返しているだけなので、メディア クエリのコードの一部を削除しました。

の画像parentDivision-separator-middleが大きすぎて、切り取られたり重なったりせずにコンテナー内に収まらないことがわかります。これは、parentDivision-separator-middle で設定された高さがchildDivision7、画像を設定した場所よりも小さいためです。高さを継承するように設定することでそれを回避しました：

div.parentDivision .childDivision7 {
        background-image:url(http://www.bryantsmith.com/blog/wp-content/uploads/2011/10/cssediter1.png);
        height: inherit;
    }

コードをクリーンアップできる他の領域がありますが、これで探しているものが得られると思いますか?

于 2013-05-14T21:01:40.477 に答える