Question

我是响应式设计和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将导致移动设备出现问题。

Answer 1

调整对象大小

要在屏幕调整大小时更改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;
}

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

请注意，如果桌面上的浏览器宽度为400px，也会应用此功能！这样，如果浏览器的大小调整为400px宽度，图像将缩小以适应该位置。换一种说法。 Media Query是根据屏幕大小更改CSS属性的最佳选项。同样，您可以使用width: 100%。

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

居中对象

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

可以说，您希望在页面中心对齐一些图像，您可以使用max-width: 100px和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/

祝你好运：）

Answer 2

.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;
}

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

Answer 3

您应该只为图片使用max-width：100％。它将保持图像的响应。

Answer 4

我的意见是在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%;}

如何使图像居中并使其响应和调整大小以适应屏幕变化？

4 个答案:

调整对象大小

居中对象

白色背景

参考：