Bootstrap 4中容器内的全角图像

Posted 2023-03-06

【中文标题】Bootstrap 4中容器内的全角图像

【英文标题】：Full-width image inside container in Bootstrap 4

【发布时间】：2016-12-22 16:12:43

【问题描述】：

我正在使用 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="" >
</div>
<div class="container">
  more text
</div>
..

我该如何解决这个问题？

【问题讨论】：

你在用container-fluid吗？

不，我不是。但我刚刚读到如果我使用<div class="container-fluid"><div class="row">no padding</div></div>，我也许可以获得我想要的东西。为什么这种行为不在.container 类中:(

container 用于固定宽度布局，container-fluid 用于全宽度。

【参考方案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/

【讨论】：

不错的一个！我还要添加一个“最大宽度：100vw；”因为一些与此属性集冲突的 css 否则会搞砸。

对于使用 full-width-image 像图像类添加 height: auto.

我只是尝试这个解决方案，但它有问题。如果您有滚动条，则计算会变得混乱并添加水平滚动条。请参阅示例：jsfiddle.net/ondrejruzicka/07y0o746 我将 left: 50%; 更改为 left: 49% 但这是非常丑陋的解决方案......你们知道如何解决这个问题吗？谢谢！

【参考方案2】：

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

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

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

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

【讨论】：

在我的情况下，没有 w-100 它不适合更大的屏幕，谢谢。

【参考方案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/

【参考方案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。

【参考方案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，并仅将其添加到其中需要它的元素中。

【参考方案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": `$calcpx`, "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;

【参考方案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%;

【讨论】：

他知道这一点，但是他需要使用 .container ，然后使用 .container-fluid ，然后再次使用 .container 等等。通过一直添加 .container 而不是将其作为默认值并在之后选择流动的内容来进行大量工作。

【参考方案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 " >

   </div>