如何在手机上使用css居中显示图片？
如何在手机上使用css居中显示图片？
提问于 2018-07-09 05:03:36
我在html标签上使用了背景img，但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;
}这就是结果
这就是我的东西
回答 3
Stack Overflow用户
发布于 2018-07-09 05:15:28
Stack Overflow用户
发布于 2018-07-09 05:09:04
尝试添加以下内容：
background: url(images/image.jpg) no-repeat 50% 50%;Stack Overflow用户
发布于 2018-07-09 06:17:04
实际上，您可以使用background-size: cover;，但因为这通常会剪切图像，所以还必须指定background-position属性。所以你的代码会是这样结束的：
#myDivID {
background: url(myImageUrl);
background-size: cover;
background-position: center;
}此外，如果您想要提高与旧版本浏览器的兼容性，您可以使用背景大小前缀，并在代码中附加以下内容：
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;在这里查看完整的代码：https://jsfiddle.net/awrstbn9/9/当然还有其他方法可以实现这一点，但(在我看来)这是推荐的方法。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51235982
复制相关文章
相似问题