html - Bootstrap 3 : Responsive Image with fixed Hight should zoom in.

Question

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

提前致谢!

Answer 1

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

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

<div class="hero"></div>

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

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

<div class="hero"></div>