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

【问题标题】：bootsrap - keeping IMG same size and centered for XSbootstrap - 保持 IMG 大小相同并以 XS 为中心
【发布时间】：2016-02-15 08:46:43
【问题描述】：

我将如何保持 IMG 的大小相同并使其在引导程序中仅针对大小 XS 保持居中？

我的代码与此相同：http://jsfiddle.net/dpvarcfe/

<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 会变得非常小。我怎样才能阻止它缩小？

谢谢！

【问题讨论】：

首先，您使用的是img-responsive 类，正因为如此，图像会响应大小的变化。使用图像的自定义尺寸，例如img { width: 300px; }，或者您想要的任何尺寸，然后删除img-responsive。

标签： css image twitter-bootstrap image-resizing

【解决方案1】：

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

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

【讨论】：

我不确定这是否可行，因为在全屏分辨率下，div 仍然堆叠，我需要它们以全分辨率彼此相邻，并且仅以 XS 大小（
它也不必是 IMG，如果这样更容易的话，我可以在 div 中制作 bg-image。似乎有官方的引导代码，所以我不必使用任何自定义类，但我找不到任何东西。
我已更改 codepen 以使它们彼此相邻@ full res 和 stack @ size XS。
@GhostEcho 这适合你吗？
是的，这就行了。将 IMG 包装在自己的 <div> 中使其更易于管理。谢谢！