Question

我在使用此css的响应式div框中显示了一个带有正确尺寸的矢量img：

.col1 > div {
  width:100%;
  height:25%;
  position: relative;
}
.thisIMGcontainer {
  height: 100%;
  width: 100%;
  position: absolute;
  display: table;
}
.thisIMG {
  background-image: url('../img/thisIMG.png');
  background-size: contain;
  background-repeat: no-repeat;
}

对于这个HTML：

<div class="col1">
    <div class="box1">
      <div class="thisIMGcontainer"><div class="thisIMG"></div></div>
    </div><!--/box1-->
</div>

我尝试了多种CSS组合来使img在中心对齐，但它要么保持与左边对齐，要么随机消失！

显示：table-caption;或显示：inline-block;和保证金：0自动;

Answer 1

你的图像div没有宽度，所以它需要所有可用的宽度 - 100％。如果您希望图像居中，则必须使用<img>标记而不是使用背景图像，或者必须在.thisIMG类中设置宽度。

在响应div框中居中矢量图像？

1 个答案: