使用 css 正确调整徽标/图像大小和定位答案

【问题标题】：Proper logo/image sizing and positioning with css使用 css 正确调整徽标/图像大小和定位
【发布时间】：2013-07-06 13:57:42
【问题描述】：

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

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

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

【问题讨论】：

标签： html css

【解决方案1】：

嗯，添加这个样式能解决问题吗？

.logoimage{
    background-size: contain;
}

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

【讨论】：

好的，谢谢！以及如何将其居中（水平和垂直）？
嗯，那么你可以在你的背景属性中添加另一个center，这样它就变成了background: url("images/Logo.png") no-repeat scroll center center;，以垂直和水平居中。
两个中心不起作用。我的标志仍然贴在中心顶部:(
div需要居中，还是div内的背景img？
哦，您是否希望将 .logoimage div 本身垂直居中在其父级中？

【解决方案2】：

你应该使用背景尺寸：

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

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

【讨论】：

【解决方案3】：

把图片放在图片标签中，给图片标签添加一个类。在课堂上放：

.logoimage{

    width: 500px;
    height: auto;
}

【讨论】：

【解决方案4】：

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

进行扩展

【讨论】：

【解决方案5】：

This style might be useful:

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

【讨论】：