1

レスポンシブデザインとCSSは初めてです。単純な質問のように思えますが、Google から直接の回答を得ることはできません。試してみましたhttp://css-tricks.com/centering-in-the-unknown/ゴースト ブロックは完全に機能しますが、背景色が白くなります。今、私は立ち往生しています。基本的に、ロゴのサイズは 534x385 で、このロゴをどのデバイスでも中央に配置したいと考えています。携帯電話の場合、このロゴも縮小して画面サイズに合わせたいと思います。

<div>
    <img class="logo" src="images/shapes-logo.png" />
</div>

.logo {
    position: fixed;
    top:15%;
    left: 50%;
    margin-left: -267px;
} 

html {
    background: url('../images/shapes-background.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

これまでの私のCSSは次のとおりです。しかし、これを行うと、margin-left: -267px はモバイル デバイスで問題を引き起こします。

4

4 に答える 4

0

画像には単純に max-width:100% を使用する必要があります。画像の応答性を維持します。

于 2013-10-20T05:13:54.087 に答える