HTML5图像无法与相同的CSS正确对齐

Question

我试图在两个div中对齐两个图像。这些是两个图像，它们具有相同的尺寸，分辨率，并且在photoshop中进行对齐是完美的：

但是当我在index.html中引用它们时，就像这样：

<!-- Intro Header -->
<div class="intro">
    <div class="intro-body">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <h2>ssss</h1>
                </div>
            </div>
        </div>
    </div>
</div>

<!-------acerca---------->

<div id="acerca" class="acerca">
    <div class="acerca-body">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <h2>Acerca de Cssss</h2>
                </div>
            </div>
        </div>
    </div>
</div>

使用完全相同的css类：

.intro {
display: table;
width: 100%;
height: auto;
padding: 100px 0;
text-align: center;
color: #fff;
background: url(http://i.imgur.com/jDhQ6PP.jpg?1) no-repeat bottom center scroll;
background-color: #000;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}

.intro .intro-body {
    display: table-cell;
    vertical-align: middle;
}

.intro .intro-body .brand-heading {
    font-size: 40px;
}

.intro .intro-body .intro-text {
    font-size: 18px;
}


.acerca {
    display: table;
    width: 100%;
    height: auto;
    padding: 100px 0;
    text-align: center;
    color: #fff;
     background: url(http://i.imgur.com/raMFNcc.png?1) no-repeat bottom center scroll;
    background-color: #000;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

.acerca .acerca-body {
    display: table-cell;
    vertical-align: middle;
}

.acerca .acerca-body .brand-heading {
    font-size: 40px;
}

.acerca .acerca-body .acerca-text {
    font-size: 18px;
}

如图所示，图像不对齐：

由于缺乏声望点，我无法发布图片，这只是我的第二个问题。

有谁知道如何对齐它们？感谢。

JSfiddle：https://jsfiddle.net/uyo35tuf/

Answer 1

看起来你想要使用

background-size: 100% 100%;

覆盖它是不一样的

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

  

封面此关键字指定背景图片应为   缩小到尽可能小，同时确保其尺寸   大于或等于相应的尺寸   背景定位区。

我找到了一个非常有用的解释： http://blog.vjeux.com/2013/image/css-container-and-cover.html

你不需要前缀 http://shouldiprefix.com/#background-image-options

我也向你提出一个解决方案：

CSS

html, body{
    height:100%;
    padding:0;
    margin:0;
}
body{
    display:flex;
    flex-direction: column;
}

.intro, .acerca{
    flex:1;
    width: 100%;
    color: #fff; 

    display: flex;
    align-items: center;
    justify-content: center;
}

.intro {
    background: url(http://i.imgur.com/jDhQ6PP.jpg?1) no-repeat 0 0;
    background-size: 100% 100%;
}

.acerca {
    background: url(http://i.imgur.com/raMFNcc.png?1) no-repeat 0 0;
    background-size: 100% 100%;
}

h1 {
    font-size: 40px;
}

h2 {
    font-size: 18px;
}

HTML

<div class="intro">
        <h1>ssss</h1>
</div>

<div id="acerca" class="acerca">
       <h2>Acerca de Cssss</h2>
</div>

这里有一个带有正确前缀的示例。 http://jsfiddle.net/luarmr/y33yc91z/2/

Answer 2

在Raul的建议的帮助下，我玩了代码并根据需要获得了输出。 100% 100%会使图像按原样呈现，并且也会响应。

同时将height: auto替换为height: 50vh。它告诉浏览器占用视图端口高度的50％。因此它为两个div提供100vh。

＆＃13;

＆＃13;

.intro {
  display: table;
  width: 100%;
  height: 50vh;
  padding: 100px 0;
  text-align: center;
  color: #fff;
  background: url(http://i.imgur.com/jDhQ6PP.jpg?1) no-repeat bottom center scroll;
  background-color: #000;
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  background-size: 100% 100%;
  -o-background-size: 100% 100%;
}
.intro .intro-body {
  display: table-cell;
  vertical-align: middle;
}
.intro .intro-body .brand-heading {
  font-size: 40px;
}
.intro .intro-body .intro-text {
  font-size: 18px;
}
.acerca {
  display: table;
  width: 100%;
  height: 50vh;
  padding: 100px 0;
  text-align: center;
  color: #fff;
  background: url(http://i.imgur.com/raMFNcc.png?1) no-repeat bottom center scroll;
  background-color: #000;
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  background-size: 100% 100%;
  -o-background-size: 100% 100%;
}
.acerca .acerca-body {
  display: table-cell;
  vertical-align: middle;
}
.acerca .acerca-body .brand-heading {
  font-size: 40px;
}
.acerca .acerca-body .acerca-text {
  font-size: 18px;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<!-- Intro Header -->
<div class="intro">
  <div class="intro-body">
    <div class="container">
      <div class="row">
        <div class="col-md-8 col-md-offset-2">
          <h2>ssss</h1>
                </div>
            </div>
        </div>
    </div>
</div>

<!-------acerca---------->

<div id="acerca" class="acerca">
    <div class="acerca-body">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <h2>Acerca de Cssss</h2>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;