如何在bootstrap列中处理图像？

Question

我得到了包含内部图像的bootstrap col-md-1.此外,该列由带有填充的内容div包装.

我不能接受的问题是这个图像非常小.我希望它的尺寸​​至少和原来一样大,

但它应该是响应.

我怎样才能做到这一点？提前致谢!

我的Codepen

HTML

<div class="content">
  <div class="row">
    <div class="col-md-11 first-column"></div>
    <div class="col-md-1 back-to-blog">
      <a href="/">
        <img class="img-responsive" src="https://api.asm.skype.com/v1/objects/0-neu-d1-6d077751650ba9cb23f065b16e4d4581/views/imgpsh_fullsize">
      </a>
    </div>
    </div>
  </div>
</div>

CSS

.content {
  padding: 0 35px;
}

.first-column {
  border: 1px solid;
  height: 100px;
}

Answer 1

BootStrap附带的"毯子"样式之一是:

img {
    max-width: 100%;
}

这实质上意味着图像不会比它们的父容器/元素更宽.因此,如果您col-md-1的宽度为97.5px(假设您正在使用普通的1170px容器？),则在视口> 992px时,您的图像不会大于97.5px.

尝试使用不同大小的列进行试验:

<div class="col-md-10 first-column"></div>
<div class="col-md-2 back-to-blog">
    <a href="/">
      <img class="img-responsive" src="https://api.asm.skype.com/v1/objects/0-neu-d1-6d077751650ba9cb23f065b16e4d4581/views/imgpsh_fullsize">
    </a>
</div>

或者,对于较大的视口,尝试将另一个类附加到包装容器并覆盖BootStrap的本机容器类:

<div class="container container-custom">

然后风格如下:

@media (min-width: 1420px) {
    .container.container-custom {
        width: 1390px
    }
}

这样做可以确保您的列宽与容器大小保持一致(毕竟它们是百分比),最重要的是,您不会覆盖BootStrap!

您还会注意到我已将上述类包装在媒体查询中.这是视口> 1420px有1390px容器,两侧有间距(由于容器的中心margin-left: auto和margin-right: auto视口中心).