Question

我想为我的网站制作一个响应式标题。显然我使用了bootstrap .img-responsive类。我的问题是，当屏幕变大时，由于height: auto，高度也会增加因此，在普通的桌面屏幕上，图片对我来说太大了。我曾经看过一些网站，图片宽度为100％，但固定高度。如果宽度改变，图片放大或平移。这是我的意思example 我在网上搜索资源但什么也没找到。你们中的任何人能帮助我吗？

提前致谢！

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Bootstrap3：具有固定高度的响应图像应放大。

1 个答案: