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

【问题标题】：How to center an image and make it responsive and resizable as screen change?如何使图像居中并使其响应屏幕变化并调整大小？
【发布时间】：2013-10-20 17:25:16
【问题描述】：

我是响应式设计和 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 会在移动设备中引起问题。

【问题讨论】：

标签： html css responsive-design

【解决方案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;
}

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

请注意，如果桌面浏览器的宽度为 400 像素，这也适用！这样，如果浏览器被调整到 400px 宽度，图像将缩小以适应该位置。换句话说。媒体查询是根据屏幕尺寸更改 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/

祝你好运:)

【讨论】：

还需要加上“display:block;”连同宽度/边距属性使对象居中。

【解决方案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;
}

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案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%;}

【讨论】：