Question

我正在尝试将我的徽标放在我网站上的背景图片上，但没有成功。我的徽标的原始大小是712x200像素。但我希望它稍微小一些，所以我增加了高度：140px和宽度：500px到我的css（这与我的徽标的原始大小成正比）。

然而，徽标图像没有调整大小（它不会像我在我的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/

所以，基本上我有一个背景图片，我想在它上面添加标志，它应该始终居中。谢谢大家！

Answer 1

嗯，添加此样式会解决问题吗？

.logoimage{
    background-size: contain;
}

否则，请告诉我，我将很乐意进一步提供帮助！

Answer 2

将图像放入图像标记中，向图像标记添加一个类。在班上放：

.logoimage{

    width: 500px;
    height: auto;
}

Answer 3

你应该使用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

Answer 4

如果其他答案都不起作用，您可以随时尝试使用
进行缩放 height: 50%
width: 50%

Answer 5

This style might be useful:

.logoimage
{
background:url("flwr.gif");
background-size:140px 500px;
background-repeat:no-repeat;
padding-top:40px;
}

适当的徽标/图像大小和css定位

5 个答案: