html - 如何处理 Bootstrap 列内的图像？

Question

我得到了包含图像的 Bootstrap col-md-1。此外，该列由带有填充的内容 div 包裹。

我不满意的问题是这张图片太小了。我希望它至少和原来的大小一样，

但它应该是响应式的。

我该怎么做？提前致谢!

My 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 容器？)，您的图像在视口(viewport) > 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>

或者，对于更大的视口(viewport)，尝试将另一个类附加到包装容器并覆盖 BootStrap 的 native 容器类:

<div class="container container-custom">

则样式如下:

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

这样做将确保您的列宽与您的容器大小保持成比例(毕竟它们是基于百分比的)并且最重要的是，您不会覆盖 BootStrap!

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