Bootstrap 4中容器内的全角图像

Question

我正在使用 Bootstrap 4，并且我有一个模板布局

<div class="navbar">
  ...
</div>
<div class="container">
  {{content}}
</div>

这几乎适用于所有情况。但是，有时我希望内容中的图像占据整个宽度，但这是不可能的，因为.container 使用了left-padding 和right-padding。

我可以通过在每个视图的正确位置而不是在我的模板布局文件中添加.container 类来解决这个问题，但这会变得很烦人。特别是如果我有一个 CMS 可以让不同的作者写文章，并且如果他们想要在他们的文章中间有一个全角图像，他们必须编写原始 html 来类似于

<div class="container">
  some text
</div>
<div class="full-width-image">
  <img src="" alt="">
</div>
<div class="container">
  more text
</div>
..

我该如何解决这个问题？

Answer 1

您可以使用具有负边距的vw 单位。而且响应友好。

.full-width-image {
   width: 100vw;
   position: relative;
   left: 50%;  
   margin-left: -50vw;
}

.full-width-image img {
  width: 100%;
}

看我的小提琴：https://jsfiddle.net/ondrejruzicka/07y0o746/

Answer 2

在bootstrap 4中，可以申请img-fluid类：

<img class="img-fluid w-100" src="path.jpg" />

这里应用了w-100 类以确保较小的图像适合其容器。

对于使用 bootstrap 3 的用户：只需应用 img-responsive 而不是 img-fluid。

Answer 3

作为一个不需要任何 css 的简单解决方案，您可以使用 px-0 间距实用程序将图像设置为全宽。

<!-- FULL-WIDTH IMAGE --> 
<div class="container-fluid">
  <div class="row">
    <div class="col-12 px-0">
      <img class="img-fluid" src="your-image">
    </div>
  </div>  
</div>

<!-- 12 COLUMN IMAGE --> 
<div class="container-fluid">
  <div class="row">
    <div class="col-12">
      <img class="img-fluid" src="your-image">
    </div>
  </div>  
</div>

看到这个代码笔：

请参阅CodePen 上 ferdinand huber (@fdhu) 的 Pen full width image。

有关间距实用程序的更多信息： https://getbootstrap.com/docs/4.1/utilities/spacing/

Answer 4

我只是觉得这个可以帮助你。我所做的是将图像作为<div> 本身的背景，并设置指定的高度以使图像可见，因为里面没有内容。

CSS

.full-width-image {
  height: 300px; // your specified height
  background: url("your-image.jpg") no-repeat center center fixed;
  background-size: cover;
}

再加上它的左右填充以与您的其他内容对齐添加类.container。

HTML

<div class="container full-width-image"></div>

这是一个示例demo。

Answer 5

如果您知道div.container 的padding，您可以在图像类上设置相同数量的负数margin。

HTML：

<div class="container">
    <img class="full-width-image" src="whatever.jpg" />
</div>

CSS：

.container {
    padding: 10px;
}

.full-width-image {
    margin: -10px;
}

或者，也许更正确的是，您可以从div.container 中完全删除padding，并仅将其添加到其中需要它的元素中。

Answer 6

关键是使用负边距。但是对于 Bootstrap，由于多个断点和不同的设备，每次都很难获得准确的余量。

这是您可以添加的 Javascript。它所做的实际上是将所有图像包装成一个具有“图像居中”类的图形，并且 将图像的初始宽度（必须设置为 HTML 属性）与由于屏幕而必须采用的宽度进行比较 如果初始图像宽度大于屏幕限制，则文章内的图像将全屏显示。否则会居中。

$(document).ready(function(){
    $("img").wrap("<figure class='image-centered'></figure>");
    $("figure.image-centered").each(function(){
        if ($(this).children("img").attr("width") > $(this).children("img").width()){
            var containerMargins = $(".container").css("marginRight").replace(/[^-\d\.]/g, '');
            var containerPadding = $(".container").css("paddingRight").replace(/[^-\d\.]/g, '');
            var calc = $(".container").width() + (Number(containerMargins) + Number(containerPadding))*2;
            $(this).css({"maxWidth": `${calc}px`, "margin": `1em -${Number(containerMargins) + Number(containerPadding)}px`});
        }
    });
});

还有 CSS：

img {
    height: auto; /* Make sure images are scaled correctly. */
    max-width: 100%; /* Adhere to container width. */
    margin: 0 auto;
    display: block;
}

figure {
    margin: 1em 0; 
}
figure.image-centered {
    margin-left: auto;
    margin-right: auto;
}

Answer 7

使用container-fluid 类而不是container 将背景图像变为响应式全宽。

示例 html：

    <div class="container-fluid">   
        <div class="row image1">
        </div>
    </div>

示例 CSS：

.image1{
background-image:url("path_to_image.jpg");
background-size: cover;
background-position: center center; 
background-repeat: no-repeat;
height: 400px;
min-width: 100%;}

Answer 8

这必须有效：

    <div class="alignfull">
                          
         <img class="img-fluid" style="background-size: cover;
                                       background-position: center ; 
                                       background-repeat: no-repeat;
                                       height: auto;
                                       min-width: 100%; 
                                       width: -moz-available; " 
         src="{{ $image->image }}" alt="An image">

   </div>