0

Web サイトの背景画像にロゴを配置しようとしていますが、うまくいきません。私のロゴの元のサイズは 712x200 px です。しかし、もう少し小さくしたかったので、css に height:140px と width:500px を追加しました (これはロゴの元のサイズに比例します)。

ただし、ロゴ画像のサイズは変更されません (css で定義したように小さくなりません)。いいえ、それはトリミングされています!? どうして？

また、ロゴが常に画面の中央 (垂直および水平) に表示されるように、ロゴを背景画像の中央に配置するにはどうすればよいですか。

ここに私のcssコードがあります:

.logoimage{
    background: url("images/Logo.png") no-repeat scroll center;
    width: 500px;
    height: 140px;
}

HTML は次のとおりです。

<section id="home" class="photobg">
        <div class="inner">
                <div class="copy">
                    <h1 class="logoimage"></h1>


                </div>
        </div>
    </section>

ところで、ここでやろうとしていることの同様の例をいくつか見つけました: http://milkandpixels.com/

したがって、基本的には背景画像があり、その上に常に中央に配置するロゴを追加したいと考えています。皆さんありがとう！

4

5 に答える 5

3

うーん、このスタイルを追加すると問題は解決しますか?

.logoimage{
    background-size: contain;
}

ご不明な点がございましたら、お気軽にお問い合わせください。さらにサポートさせていただきます。

于 2013-07-05T19:56:03.673 に答える
1

イメージタグに画像を入れて、クラスをイメージタグに追加します。クラスに次のように入力します。

.logoimage{

    width: 500px;
    height: auto;
}
于 2013-07-05T19:56:30.073 に答える
1

background-size を使用する必要があります。

 .logoimage{
    background: url("images/Logo.png") no-repeat scroll center;
    background-size: 500px 140px;
}

http://www.w3schools.com/cssref/css3_pr_background-size.asp

于 2013-07-05T19:56:46.527 に答える
0 
This style might be useful:

.logoimage
{
background:url("flwr.gif");
background-size:140px 500px;
background-repeat:no-repeat;
padding-top:40px;
}
于 2013-07-06T05:57:42.467 に答える
0

他の答えがどれもうまくいかない場合は、いつでも試してスケーリングすることができます
height: 50%
width: 50%

于 2013-07-05T19:59:49.183 に答える