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

【问题标题】：Bootstrap 4: responsive pictures + cropping?Bootstrap 4：响应式图片+裁剪？
【发布时间】：2017-07-31 13:48:34
【问题描述】：

我目前正在尝试从头开始学习 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% 的高度。这可以直接在引导程序中完成吗？你会这么好心并为初学者建议一个简单的解决方案吗？
将上面的图像直接放在带有列的 div 类中是一种好习惯吗？ (<div class="col-xxx">)

【问题讨论】：

可能重复。 stackoverflow.com/questions/42642626/… - 这可能会有所帮助

标签： html css twitter-bootstrap

【解决方案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

【讨论】：

嗯，这种方法看起来很干净......我将来可能会将它用于响应式滑块 - 它会消除烦人的基于 js 的调整大小。
嗨 Edmundo，您的解决方案看起来非常优雅，但我很难让它发挥作用：codepen.io/kriszap/pen/GWWvLW。占位图片不显示，也许我应该在
标签之间添加一些东西？
嗨@KrisZap，您的代码在这里似乎运行良好。见截图：cloudup.com/cKjuvQpXUf9div.bg-cover 中不需要任何内容，只需要设置尺寸（width 和height）或padding - 就像你在引导程序中所做的那样。
谢谢，在另一条评论中，hunzaboy 注意到我在上一课中用背景属性覆盖了背景图像。非常感谢您的帮助！

【解决方案2】：

您的第一个问题：

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

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

【讨论】：

add it to your stylesheet and use it as a background image - 不是真的，他可以通过内联样式在需要的地方使用它style="background-image:url(...)"stackoverflow.com/a/42715016/7581087
我不赞成内联css。
当 HTML 代码由 Web 服务器生成时，<div><img src="pathToImage" /></div> 与 <div style="background-image:url(pathToImage)"></div> 有多大不同 - 额外字节的数量非常少。
我喜欢将样式与 HTML 分开。如果您要更改背景属性，那么最好在样式表中进行。你说什么？
你的 html 是干净的。