Question

我正在努力研究Bootstrap的响应式图像。这是问题所在。

我希望固定标题上的三个图像能够响应并相应地调整大小，不仅是它们自己，还有它们的标题容器。这意味着当屏幕变小时图像应该更小，但导航栏的比例（也应该随新的浏览器大小缩小）保持不变。我在这里说明了这种情况：fiddle。

<div class="navbar navbar-fixed-top navbar-custom">
  <div class="container" id="header">
    <div id="logoCont" class="logos"><img class="img-responsive" src="https://nationalband.com/wp-content/uploads/2014/12/137-80x80.png"/></div>
    <div id="cont2" class="logos"><img class="img-responsive" src="http://media.idownloadblog.com/wp-content/uploads/2014/12/Google-Drive-3.4-for-iOS-app-icon-small-55x55.png"/></div>
    <div id="cont3" class="logos"><img class="img-responsive" src="http://cruise-international.com/wp-content/uploads/2013/05/small-google-plus-icon-.png"></div>
  </div>
</div>

第一张图片是徽标，它应该总是比导航栏稍大，在调整浏览器大小时也是如此。其他两张图片应该保留在导航栏中，即使在调整大小时也应该垂直居中 - 在顶部和底部具有相同的“空格”，可能是边距。

我是Bootstrap的新手，我认为包含默认类 img-responsive 可以完成这项工作，所以我想我一定做错了。

感谢任何帮助！

响应式图像并排，不同高度，居中

0 个答案: