Question

我需要将图像放在div中。我知道有img-responsive中心块类，但他们出于某种原因调整了给定图像的大小。有没有办法实现相同的目标，但没有尺寸扭曲。

注意：包含div是一个带有给定类的bootstrap列：hidden-xs col-lg-9 col-md-6 col-sm-6。

谢谢

Answer 1

CSS是我的朋友

你可以尝试这个CSS类

HTML

 <img class="centerd-image" src="">

 or

 <div class="centerd-image">
      <img src="">
 </div>

CSS

.centerd-image {
     margin: 0;
     position: absolute;
     top: 50%;
     left: 50%;
     margin-right: -50%;
     -moz-transform: translate(-50%, -50%);
     -ms-transform: translate(-50%, -50%);
     -o-transform: translate(-50%, -50%);
     -webkit-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
}

Answer 2

使用css作为

的img类

 width: --%;
 margin-left:auto;
 margin-right:auto;

Bootstrap将div中的图像居中，但不调整大小

2 个答案: