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

我在拉伸这个图像时遇到问题
我找到了进入那里的办法，但不能完全解决。
我该怎么伸展它？

最佳答案

看起来您正在将整个页面包装在.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>

如果您正在使用htmlimg-responsive标记，或者如果您想使用css background属性，可以在您的img中添加另一个类，然后按如下方式设置其样式：

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

对于CSS解决方案，您需要以某种方式定义div的高度，它当然可以是固定的，在小型移动设备上看起来不太好，或者您可以通过执行.container-fluid来保持div的纵横比，其中百分比是根据纵横比计算的（即padding-bottom: 60%是100%/60%纵横比）。

关于html - 如何拉伸(stretch)图像 bootstrap ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27676399/