在html

Question

我有7个透明图像，所有图像都具有相同的宽度和相同的高度。然后我有一个宽度和高度相同的背景图像。我所做的（并且想要做的）是将背景图像放在主div中，并将所有其他7个img放在顶部，如下面的代码所示。但结果是imgs实际上从主div流出并且更大。我尝试改变我的CSS，但总是发生类似的行为。此外，背景图像不在css中指定的页面中心。 什么是我的错？

所以我得到了以下html：

 <div class="row wrapper">
      <div class="col container"><img ng-src="{{data.firstDisplay.src}}"></div>
      <div class="col container"><img ng-src="{{data.secondDisplay.src}}"></div>
      <div class="col container"><img ng-src="{{data.thirdDisplay.src}}"></div>
      <div class="col container"><img ng-src="{{data.forthDisplay.src}}"></div>
      <div class="col container"><img ng-src="{{data.fifthDisplay.src}}"></div>
      <div class="col container"><img ng-src="{{data.sixthDisplay.src}}"></div>
      <div class="col container"><img ng-src="{{data.seventhDisplay.src}}"></div>
    </div>

以下css：

img {
display: inline-block;
margin-left: auto;
margin-right: auto;
padding:0;
max-width: 100%;}

.container {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;}

.wrapper {
    padding-right:20%;
    padding-left:20%;
    width: 300px;
    height: 127px;
    background: url(img/Tbackg.png)  no-repeat center;
    background-size: contain;
    position: relative;

输出看起来像（请注意，并非所有图像都显示在此处，但显示的是点，背景是小图像，而大图像是单个图像）：

Answer 1

带有margin: auto的元素需要宽度，但在您的情况下，请删除边距并在父text-align: center;上设置.container而不是

如果img图片的高度与包装器上设置的高度不同，则需要添加height: 100%，否则它们将与背景图像的高度不匹配< / em>的

img {
  display: inline-block;
  height: 100%;            /*  needed if image is higher/lower than
                               the 127px set on the wrapper  */
}
.container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
}
.wrapper {
  padding-right: 20%;
  padding-left: 20%;
  width: 300px;
  height: 127px;
  background: yellow url(http://placehold.it/127) no-repeat center;
  background-size: contain;
  position: relative;
}

<div class="row wrapper">
  <div class="col container">
    <img src="http://placehold.it/227/f00">
  </div>
  <div class="col container">
    <img src="http://placehold.it/227/0f0">
  </div>
  <div class="col container">
    <img src="http://placehold.it/227/00f">
  </div>
</div>

建议放弃img以支持在容器上使用背景图像。通过这样做，图像将根据background-size: contain的工作方式进行同等调整

.container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;  
}
.wrapper {
  padding-right: 20%;
  padding-left: 20%;
  width: 300px;
  height: 127px;
  background: yellow url(http://placehold.it/127) no-repeat center;
  background-size: contain;
  position: relative;
}

<div class="row wrapper">
  <div class="col container"
       style="background-image: url(http://placehold.it/127/f00)">
  </div>
  <div class="col container"
       style="background-image: url(http://placehold.it/127/0f0)">
  </div>
  <div class="col container"
       style="background-image: url(http://placehold.it/127/00f)">
  </div>
</div>