html - 如何拉伸(stretch)图像 Bootstrap

Question

我在拉伸(stretch)这张图片时遇到问题 我找到了进入那里的解决方案，但它不会充分发挥作用。我该如何拉伸(stretch)它？

Answer 1

看起来您将整个页面包装在 .container 中，这使您的网站已修复。您需要使用 .container-fluid 以使其拉伸(stretch)至浏览器宽度。请注意，您可以混合使用这两者:

<div class="container">
    <!-- your topbar with menu here -->
</div>
<div class="container-fluid my-image">
    <!-- your image here -->
    <img src="image.jpg" alt="" class="img-responsive" />
</div>
<div class="container">
    <!-- rest of your page here -->
</div>

如果你使用的是 html img 标签，或者如果你想使用 css 背景属性，你可以在你的图像上使用 img-responsive 类，你可以添加另一个类到你的.container-fluid 然后像这样设计它:

.my-image {
    background: url(image.jpg);
    background-size: cover; /* will stretch the image to your div size while maintaining aspect ratio */
}

对于 CSS 解决方案，你需要以某种方式定义你的 div 的高度，它当然可以固定，这在小型移动设备上看起来不太好，或者你可以通过 padding-bottom: 60% 其中百分比是根据宽高比计算的(即 100%/60% 是 5/3 宽高比)。