html - css/html，如何缩放和居中 Logo 图像

Question

我正在尝试为游戏创建一个典型的主菜单屏幕。它有一个 Logo ，居中于顶部，还有一些菜单按钮。它将始终以横向布局显示，并且需要支持不同的分辨率。

这是我目前得到的:http://jsfiddle.net/L3mNT/

我的问题是:

1) 是否可以居中和缩放 Logo 仅使用DIV？或者可以“诉诸”使用 img-tag 和 center-tags 吗？ DIV 的(缺点)优点是什么？当我尝试添加以像素为单位的高度时，DIV Logo 会缩放，就像这样

.logo{
    ..
    height:120px;
}

但这必须在调整大小事件中通过 javascript 进行更新。我认为只使用 css 应该是可能的，或者我错了..？

2) 如何垂直居中 菜单div，按钮需要位于屏幕中间并且不能掉到屏幕底部。以下无效

.menu{
    width:50%;
    height:50%;
    margin:auto auto;
}

Answer 1

img 标签没问题。 center 标签自 1867 年左右就已过时。但您可以轻松地将 text-align:center 用作 Logo 父元素的样式。

所以用这样一段 HTML:

<div class="logo"><img src="..."></div>

还有这样一段 CSS:

.logo {
  text-align: center;
}
.logo img {
  width: 50%;
}

您应该有一个居中的 Logo ，大约是页面宽度的一半。

使用 img 标签并不丢人，事实上，如果你想缩放，那么拥有它非常方便。图像将根据其宽度自动相对缩放其高度。没有简单的方法可以仅使用背景图像来获得相同的效果。

或者，您可以将 Logo 作为背景。但是你必须指定容器的高度，因为它根本没有任何内容，否则会崩溃:

.logo {
    text-align: center;
    background-color: red;
    background-image: url('http://jsfiddle.net/img/logo.png');
    background-size: contain;
    background-position: 50% 0;
    background-repeat: no-repeat;
    height: 100px;
}

http://jsfiddle.net/cwj2b/