如何在移动设备上使用CSS将图片居中？

Question

我正在img标签上使用背景html，而img不在中央。我使用background size: cover;，但无法正常使用

<section class="section-a">
  <h1 class="main-header-sec-a">Bienvendio a Vida Excotica</h1>
</section>

.section-a{
  background-image: url('/img/waffles.jpeg');
  min-height: 100%;
  height: 700px;
  background-size: cover;
}

这是结果

这就是我所拥有的

Answer 1

您还可以像这样缩放图像：

background-size: 100% auto;

JSFiddle：http://jsfiddle.net/6h4up90v/6/

Answer 2

background-repeat: no-repeat;
background-position: center center;

那应该做的。

我还建议您阅读以下信息：

• background-position, MDN
• background-position, W3Schools

Answer 3

尝试添加：

background: url(images/image.jpg) no-repeat 50% 50%;

Answer 4

您实际上可以使用background-size: cover;，但是由于通常这样会最终剪切图像，因此您还必须指定background-position属性。因此您的代码最终会像这样：

#myDivID {
  background: url(myImageUrl); 
  background-size: cover;
  background-position: center;
}

此外，如果您想提高与旧版浏览器的兼容性，则可以使用带前缀background-size的代码，并在代码后附加以下内容：

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;

查看完整的代码，在这里工作：https://jsfiddle.net/awrstbn9/9/ 当然，还有其他方法可以实现此目的，但是（我认为）这是推荐的方法。