Bootstrap 4：响应式图片+裁剪？

Question

我目前正在尝试从头开始学习 bootstrap 4，并且直到现在才设法处理其有限的文档。

我把初始项目放在这里：http : //codepen.io/kriszap/pen/GWWvLW 我对这部分特别感兴趣：

<div class="col-sm-6 col-md-6 py-0 px-0 mx-0 my-0">
<img src="http://placehold.it/640x500" class="img-fluid">
</div>

我想问你两个简单的问题：

1. 当我调整低于1200像素的窗口，占位符图片缩小为预期（IMG流体类），但是我正在寻找更好的解决方案，即http://html.orange-idea.com/barton/portfolio/smart/ 的上面的例子对我来说看起来太复杂了，但我认为他们正在使用某种裁剪方法？我喜欢这里的图像填充100% 的高度。这可以直接在引导程序中完成吗？你会这么好心并为初学者建议一个简单的解决方案吗？

2. 将上面的图像直接放在带有列的 div 类中是一个好习惯吗？ (<div class="col-xxx">)

Answer 1

我建议你为此使用背景图片background-size: cover。看：

.bg-cover {
  width: 100%;
  height: 180px;
  background: url("https://source.unsplash.com/7JX0-bfiuxQ/1200x1200") no-repeat center;
  background-size: cover;
}

<div class="bg-cover">
</div>

您可以background-size在 MDN 上了解有关该属性的更多信息：https : //developer.mozilla.org/en/docs/Web/CSS/background-size#Values