1

我是响应式设计和 CSS 的新手。这似乎是一个简单的问题，但我无法从谷歌得到直接的答案。我试过http://css-tricks.com/centering-in-the-unknown/鬼块完美地工作，但它给我留下了白色的背景颜色。现在我被困住了。基本上，我的徽标大小为 534x385，我希望此徽标位于任何设备的中心。在手机的情况下，我希望这个标志也缩小以匹配屏幕尺寸。

<div>
    <img class="logo" src="images/shapes-logo.png" />
</div>

.logo {
    position: fixed;
    top:15%;
    left: 50%;
    margin-left: -267px;
} 

html {
    background: url('../images/shapes-background.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

到目前为止，这是我的 CSS。但如果我这样做，margin-left: -267px 会在移动设备中引起问题。

4

4 回答 4

4

调整对象大小

要在屏幕调整大小时更改 CSS 属性，可以使用

element {
  width: 100%;
  height: 100%
}

您也可以指定自己的值以使它们起作用。这样，每次屏幕缩小时，对象或元素都会变小。

其他方式，让手机和平板电脑开始工作是使用 CSS3（媒体查询）

像这样：

@media only screen and (max-width: 400px) {
  /* here comes the trick..this is the css, which would be applied to all 
   * the devices whose screen has a max-width of 400px..
   */
}

然后您可以为其设置一些属性，假设您可以将图像宽度更改为

img#logo {
   width: 50px;
}

因此，对于较小尺寸的屏幕，图像宽度仅为 50 像素。

请注意，如果桌面上的浏览器宽度为 400 像素，这也适用！这样，如果浏览器被调整到 400px 宽度，图像将缩小以适应该位置。换句话说。媒体查询是根据屏幕尺寸更改 CSS 属性的最佳选择。同样，您可以使用width: 100%.

为了使百分比的东西起作用，你应该使用一个容器，比如div这样，img 将继承 div 的宽度并填充它。例如，如果包裹图像的 div 宽度为 400px，则图像width: 100%的宽度为 400%，依此类推。

使对象居中

使对象居中的最佳方法是使用边距。但不是自定义的，而是生成的浏览。

比方说，你想水平对齐页面中心的一些图像，你可以使用max-width: 100pxand来实现margin: 0 auto。像这样：

img#id {
  max-width: 200px;
  margin: 0 auto; no vertical margin, auto horizontal margin
}

这样，对象将被放置在中心，浏览器将自动为其生成边距。最大宽度是为了确保它只占用它需要的空间。我几天前创建了一个网站，您可以在此处查看页面末尾的图片：http ://www.aceinternationals.com

您将看到图像从未提供任何必须牢记的代码，它只是最大宽度和边距。因此，当您使用浏览器调整大小功能时，图像将始终居中。

白色背景

白色背景可能是因为图像的背景颜色，或者是身体的背景颜色！这可能由用户代理（浏览器）继承。我不确定，为什么会这样！对不起 ：）

参考：

http://css-tricks.com/css-media-queries/

祝你好运 ：）

于 2013-10-18T23:56:10.950 回答
0

您应该简单地为您的图像使用 max-width:100% 。它将保持图像响应。

于 2013-10-20T05:13:54.087 回答
0 
.logo {
width:33%;
background: url('your_logo.png');
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

你的容器：

html {
margin:auto;
}

你可以尝试做这样的事情。如果您发布链接，我可以更好地帮助您。

于 2013-10-18T23:53:35.487 回答
0

我的意见是在 html 中添加带有徽标的附加类。
喜欢： - 

<p class="classname"><div class="logo"><img /></div></p>

.classname{ text-align:center; width:100%; }

这将始终使您的徽标居中。

如果它不能解决。将这些与上述 css 一起使用。

margin-left:auto;
margin-right:auto;

并添加：

.logo{ max-width:100%;}
于 2013-10-20T09:25:16.090 回答