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>

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

当我将窗口大小调整到1200px以下时，占位符图片按预期缩小（img-fluid类），但我正在寻找更优雅的解决方案，即http://html.orange-idea.com/barton/portfolio/smart/ 上面的例子看起来对我来说太复杂了，但我认为使用某种裁剪方法？我喜欢的是图像填充 100％的高度。这可以直接在bootstrap中完成吗？你会这么善良并为初学者建议一个简单的解决方案吗？
将上面的图像直接放在带有列的div类中是一个好习惯吗？ (<div class="col-xxx">)

Answer 1

我建议您使用background-size: cover使用背景图片。参见：

＆＃13;

.bg-cover {
  width: 200px;
  height: 300px;
  background: url("http://placehold.it/333x222") no-repeat center;
  background-size: cover;
  outline: 1px solid red;
}

＆＃13;

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

＆＃13;

您可以详细了解MDN上的background-size属性：https://developer.mozilla.org/en/docs/Web/CSS/background-size#Values

Answer 2

您的第一个问题：

您可以使用edmundo所回答的background-size: cover;。

你的第二个问题： 是的，你可以把它放在col - **中。这是正常的。但是，为了在第一个问题中获得您想要的效果，我认为您需要删除图像元素并将其添加到样式表并将其用作背景图像。

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

2 个答案: