Bootstrap 将图像置于 div 内，但不调整大小

Question

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

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

谢谢

Answer 1

CSS是我朋友

你能试试这个吗CSSclass

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 class 作为

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

Bootstrap 将图像置于 div 内，但不调整大小

Bootstrap center an image inside the div but without resizing

css

frontend

twitter-bootstrap