Question

我正在使用Bootstrap。在以下标记中，当浏览器窗口宽度减少到最小值时，图像溢出并且不会完全100％可见。

<div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12">
         <h1 style="display:inline;">Some heading here</h1>
         <img src="http://feedsinsight.com/Content/logo.png" style='height:38px;vertical-align:bottom;float:right;' />
     </div>
</div>

我怎样才能适应它？

Answer 1

你应该使用具有最大高度而不是固定高度的bootstrap img-responsive类来使图像在小屏幕上很好地缩放。

Bootstrap还有一个便利类pull-right，您可以使用它而不是内联浮动样式。

<div class="row">
    <div class="col-xs-12">
         <h1 style="display:inline;">Some heading here</h1>
         <img class="img-responsive pull-right" src="http://feedsinsight.com/Content/logo.png" style='max-height:38px; vertical-align:bottom;' />
     </div>
</div>

这是一个很好的示例：http://www.bootply.com/x9KQXFqkGr

Answer 2

您应该使用最小宽度和最大宽度，或者将“height：38px”设置为高度100％。使用％值比指定像素更敏感。

Answer 3

使用 class="img-fluid" 这适用于 Bootstrap 4。它将最大宽度设置为 100%。图片高度设置为自动。

图像走出Bootstrap标记中的屏幕

3 个答案: