0

我正在尝试将我的徽标定位到我网站上的背景图像上，但没有成功。我的标志的原始尺寸是 712x200 像素。但我希望它更小一点，所以我在我的 css 中添加了 height:140px 和 width:500px （这与我的 logo 的原始大小成正比）。

但是，徽标图像没有调整大小（它不会像我在我的 css 中定义的那样变小）。Insted，它被裁剪了！？怎么来的？

以及如何将徽标居中放在我的背景图像上，以便我的徽标始终出现在屏幕的正中央（垂直和水平）。

这是我的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

你应该使用背景尺寸：

 .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 回答