bootstrap - 保持 IMG 大小相同并以 XS 为中心

Question

我如何才能让 IMG 保持相同的大小并使其在 bootstrap 中仅针对 XS 号居中？

<div class="container">
<div class="row">
<div class="col-xs-4 col-xs-offset-4 col-sm-4 col-sm-offset-0 col-lg-4 col-lg-offset-0">
    <img
        src="https://c1.staticflickr.com/3/2813/9093733888_79ccacf171_z.jpg"
        alt="pic" class="img-responsive img-circle">
</div>
<div
    class="col-xs-12 col-sm-6 col-sm-offset-2 col-lg-6 col-lg-offset-2 text-center">

我试图为 IMG 添加最小高度和最小宽度，但它失去了居中。您可以看到，当您缩小浏览器时，IMG 会变得非常小。我怎样才能阻止它缩小？

谢谢！

Answer 1

请告诉我这是否是您要找的东西，如果不是，请告诉我缺少什么。我使用填充而不是偏移来确保文本内容不会占据整个 space 列。

HTML:

<div class="container-fluid conle">
<div class="row">
    <div class="col-xs-12 col-sm-3 sizes">
        <img
            src="https://c1.staticflickr.com/3/2813/9093733888_79ccacf171_z.jpg" height =100px;
            alt="pic" class="img-circle">
  </div>
  <div class="col-xs-12 col-sm-9 sizes">
        <h3>Hello World!</h3>
        <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa
            qui officia deserunt mollit anim id est laborum.</p>
  </div>
    </div>
</div>
</div>

CSS:

.conle {text-align:center;  }
.sizes {padding-left:5%; padding-right:5%;}

http://codepen.io/anon/pen/rxRaoo

bootstrap - 保持 IMG 大小相同并以 XS 为中心

bootsrap - keeping IMG same size and centered for XS

css

image

image-resizing

twitter-bootstrap