如何拉伸图像引导程序

Question

我在拉伸此图片时遇到问题 我找到了进入那里的解决方案，但它不会完全伸展。 我如何伸展它？

Answer 1

看起来您正在.container中整理整个页面，这使得您的网站已经修复了。您需要使用.container-fluid才能使其延伸到浏览器宽度。请注意，您可以将这两者混合使用：

<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-responsive标记，请在图片上使用img课程，或者如果您想使用css背景属性，则可以在.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的高度，当然可以修复它在小型移动设备上看起来不太好，或者您可以通过执行{{来保持该div的宽高比。 1}}其中百分比是根据宽高比计算的（即padding-bottom: 60%是100%/60%宽高比。）

Answer 2

简单地使用“container-fluid”类名而不是“container”

这是示例代码

<div class="container-fluid">
    <img src="someimage.png" />
</div>

确保此容器没有“容器”类的父母，

这应该是直接的孩子身体。