Bootstrap 3：具有固定高度的响应式图像应该放大。答案

【问题标题】：Bootstrap3: Responsive Image with fixed Hight should zoom in.Bootstrap 3：具有固定高度的响应式图像应该放大。
【发布时间】：2017-09-24 10:44:44
【问题描述】：

我想为我的网站制作一个响应式标题。显然我使用了引导程序 .img-responsive 类。我的问题是，当屏幕变大时，高度也会增加，因为height: auto。
所以在普通的桌面屏幕上，图片对我来说太大了。我见过一些网站，其中图像的宽度为 100%，但高度固定。如果更改宽度，图片会放大或平移。这是我的意思的example。
我在网上搜索了资源，但一无所获。你们中的任何人都可以帮助我吗？

提前致谢！

【问题讨论】：

你能发布你到目前为止尝试过的代码吗？这应该是设置最小高度的问题。
您要做的是将图像设置为div的background-image。将 div 的高度设置为您想要的任何值，宽度 100%，然后添加 background-image 和 background-size:cover;
对我来说更像是max-width 问题，将max-width 设置为img。

标签： html css image twitter-bootstrap responsive-design

【解决方案1】：

扩展我上面的评论，如果您希望图像在保持相同高度的同时根据屏幕尺寸进行缩放，请在具有定义高度的元素上使用 background-image 属性：

.hero {
  width:100%;
  height:300px;
  background-image:url('https://placeimg.com/1000/450/nature');
  background-size:cover;
}

&lt;div class="hero"&gt;&lt;/div&gt;

如果您对图像的裁剪位置不满意，可以使用background-position 进行调整：

.hero {
  width:100%;
  height:300px;
  background-image:url('https://placeimg.com/1000/450/nature');
  background-position:center center;
  background-size:cover;
}

&lt;div class="hero"&gt;&lt;/div&gt;

【讨论】：

有了这个固定的高度，它不能响应
@blecaf 当然可以，在我的例子中。如果 OP 也希望高度响应，他们只需要为各种断点定义不同的高度。
请解释反对意见，我的回答完全符合 OP 的要求（即使使用与他们提供的示例相同的方法）。
我没有给你投反对票。我刚刚评论了。为图像指定高度并不能很好地响应响应。 min-height 和 max-height 效果更好。
min-height 和 max-height 不适用于此解决方案，因为 div 中没有内容可以为元素提供高度。我的回答使用了 OP 提供的示例中使用的相同解决方案。