html - Bootstrap 4 : responsive pictures + cropping?

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-fluid 类)，但我正在寻找更优雅的解决方案，即 http://html.orange-idea.com/barton/portfolio/smart/ 上面的例子对我来说看起来太复杂了，但我认为他们正在使用某种裁剪方法？我在这里喜欢的是图像填充 100% 的高度。这可以直接在 Bootstrap 中完成吗？您会很友善并为初学者建议一个简单的解决方案吗？

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>

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