具有固定宽度网格的引导程序和应跨越窗口宽度的图像

Question

我想在容器width之外显示图片，填充到浏览器的右边缘。

目前我正在使用JavaScript进行此操作，但我感觉并且看起来很笨拙，并且由于缺少ALT标签而导致SEO不友好，并且当css触发较小屏幕的不同视口设置时也会引入问题。

我错过了一个文档章节吗？

我目前的设置：

<div class="container-fluid screen-image" style="background: url('image.png') no-repeat;" data-position-object="screen1">
  <div class="container">
    <div class="col-md-6">
      my content
    </div>
    <div class="col-md-6" id="screen1">
    </div>
  </div>
</div>

Javscript：

$(document).ready(function () {
    setScreenPositions();

    $(window).on('resize', function() {
       setScreenPositions();
    });

    function setScreenPositions() {
        $('.screen-image').each(function() {
            var $this = $(this),
                $positionObject = $('#' + $this.attr('data-position-object'));

            $this.css('background-position', $positionObject.position().left + 'px 60px');
        });
    }
});

为了更好地说明我的目标，我已经将我的Word绘图技巧付诸实践，因为我现在不在自己的计算机上;）

Answer 1

尝试以下HTML结构：

<div class="container-fluid screen-image">
    <div class="row">
        <div class="col-md-offset-6 col-md-6 col-sm-12 image-content">
        </div>
    </div>
</div>

<div class="content-wrapper">
    <div class="container">
        <div class="col-md-6">
            my content
        </div>
        <div class="col-md-6">
            content 2
        </div>
    </div>
</div>

然后使用这个CSS：

    .screen-image {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        padding: 0; /* Cover the full screen width */
    }

    .screen-image .image-content {
        height: 400px; /* Dummy height. Change with your desired height */
        background: url("image.png") no-repeat;
        background-size: cover; /* Anything that suits your needs */
        background-position: 0 0;
    }

    .content-wrapper {
        position: relative; /* Go on top of the screen-image */
    }

以下是一个快速解释：

• 我们在背景图片容器上设置position: absolute。我们不希望它推迟内容。
• 屏幕图像填充为0将使默认的.container-fluid padding无效，从而使图像覆盖整个屏幕。
• 对于内容我们需要相对位置。否则它将显示在.screen-image元素下。
• 在.screen-image .image-content我们需要设置.col-sm-12，以便在移动设备上覆盖整个屏幕。我们没有2列，因此用背景图像覆盖整个屏幕是有意义的。

编辑（img标签）

SEO友好图片代码示例：http://codepen.io/avladov/pen/bpKvYd

Answer 2

看起来这种情况发生了，因为您在容器流体中使用了容器。请尝试使用行类替换容器类。它肯定会解决您的问题。

祝你好运。

Answer 3

根据Bootstrap Docs，您的HTML不正确，

• .container
之后你不应该.container-fluid
• 在.container之后您应该有.row

使用正确的HTML并根据我的理解，您只需要重置padding类中给出的引导默认col-。

<强>更新

您需要向width提供container-fluid，然后使用position:relative（-col中已有的引导程序）并使用calc()视口单元。

注意我使用!important只是为了让演示更简单。在生产避免使用!important，通过更具体地了解CSS规则。

body {
  background: rgba(255, 255, 0, .5) !important
}
.container-fluid {
  background: rgba(255, 0, 0, .5);
  width: 70% /*adjust the width accordling to your needs*/
}
[class$="-6"] {
  /*all classes ending with "-6" */
  border: 1px green solid;
  padding: 0 !important;
}
/* the -70vw should be equal to the % width of container-fluid */
.row div:first-of-type {
  left: calc(-70vw + 80%) 
}
.row div:last-of-type {
  right: calc(-70vw + 80%)
}
img {
  opacity: .65
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-6 col-md-6">
      my content
    </div>
    <div class="col-xs-6 col-md-6">
      <img class="img-responsive" src="//lorempixel.com/1000/300" />
      <!-- this should size up to right end of the window, meaning it should overflow .col-md-6 and .container -->
    </div>
  </div>
</div>

Answer 4

您可以使用vw单位将图像宽度设置为视口宽度的50％。您将需要将包裹图像的网格单元格上的填充清零。 vw单位为supported by all major browsers：

.row .col-img-wrap {
  padding-left: 0;
  padding-right: 0;
}
.col-img-wrap img {
  width: 50vw;
}
.col-align-right img {
  float: right;
}
/* not needed */
.container {
  border: 1px red solid
}
.row {
  background-color: #bca;
}
.col-xs-12 { 
  text-align: center;
  padding: 3em;
  background-color: #abc;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="container">
    <div class="row">
      <div class="col-xs-6 col-md-6">
        This is some content inside a col-xx-6 cell
      </div>
      <div class="col-xs-6 col-img-wrap">
        <img src="//lorempixel.com/1000/300" alt="SEO Text" />
      </div>
      <div class="col-xs-12">
        This is some content inside a col-xx-12 cell
      </div>
      <div class="col-xs-6 col-img-wrap col-align-right">
        <img src="//lorempixel.com/1000/300" alt="SEO Text" />
      </div>
      <div class="col-xs-6">
        This is some content inside a col-xx-6 cell
      </div>
    </div>
  </div>
</div>

Answer 5

这不是最漂亮的解决方案，但确实有效。它并不像我希望的那样流畅。

http://codepen.io/iMarketingGuy/pen/BKVmMj

CSS

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

.row {
    margin-top: 40px;
    margin-bottom: 40px;
}

.row img {
    float: left;
    width: 100%;
    height: auto;
    margin-bottom: 10px;
}

.floatRight {
    float: right !important;
}

.image {
    float: left;
    width: 100%;
}

.image img {
    float: left;
    width: 100%;
    height: auto;
}

的JavaScript

var containerWidth = $(".container").width();

if (containerWidth > 750) {
    $("#row-1-image-col").css({ "position": "absolute", "right": "0", "margin-right": "-15px" });
    $("#row-3-image-col").css({ "position": "absolute", "left": "0", "margin-left": "-15px" });
} else {
    $("#row-1-image-col").css({ "position": "relative", "padding": "0px 15px" });
    $("#row-3-image-col").css({ "position": "relative", "padding": "0px 15px" });
}

var row1ImageColHeight = $("#row-1-image-col").height();
var row1TextColHeight = $("#row-1-text-col").height();

if (row1ImageColHeight >= row1TextColHeight) {
    $("#row-1").css("height", row1ImageColHeight + "px");
} else {
    $("#row-1").css("height", row1TextColHeight + "px");
}

var row3ImageColHeight = $("#row-3-image-col").height();
var row3TextColHeight = $("#row-3-text-col").height();

if (row3ImageColHeight >= row3TextColHeight) {
    $("#row-3").css("height", row3ImageColHeight + "px");
} else {
    $("#row-3").css("height", row3TextColHeight + "px");
}

Answer 6

在全尺寸宽度部分之前的最终容器，不要将容器与容器流体混合。你可以有多个容器（容器和容器流体一个接一个。如果你可以使用css，不要使用js。使用自举网格。如果你不必覆盖旧的浏览器，你也可以使用flex网格更复杂的对齐网格。如果你想全屏幕背景，使用带有封面属性的背景幕在更高的elemrnt ex。身体标签上。 如果要在居中网格下使用全宽度解决方案，请将容器放入div中，并使用图像bg。

HTML：

<div class="screen-image">
<div class="container">
<div class="col-xs-6">lorem impsum dolor
    </div>
        <div class="col-xs-6">lorem ipsum dolor 
    </div>
</div>

的CSS：

.screen-image {

background-image:  url("http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg");

background-position: right top;
background-size: 50% 60px;
background-repeat: no-repeat;}

你也可以把img像col-xs-6中的常规内容一样 - 它会溢出，并使用隐藏在前体上的溢出来移除水平滑块。

我选择的解决方案是将背景图像设置为css中窗口大小的50％。 - 然后它将与网格对齐。 您也可以通过媒体查询管理它在不同分辨率下的工作方式。

Answer 7

我认为你不需要javascript。说到bootstrap，你只需要想出拼图中的所有部分。 container-fluid可以实现全宽屏幕。 添加container col-md-6会使一列具有最大宽度。然后container-fluid col-md-6创建一个半页列，没有最大宽度的图像到边缘。这是我的codepen，一个比上面这个人更简洁的版本。

http://codepen.io/MrNagoo/pen/jqvyeP

当然，在使用bootstrap的同时使用css制作自己的容器非常容易。

Answer 8

首先，我建议不要使用两个容器（双倍 网格装订线宽度），但只使用一个容器，并且使用行，以使每个列与最初的列对齐。

如下所示：

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique unde odio assumenda omnis, sunt, quam cum, animi minus fugit, voluptate adipisci illum officiis in non. Animi officia eligendi quos? Est?</p>
    </div>
    <div class="col-md-6">
      <div class="image"></div>
    </div>
  </div>
</div>

正如你所看到的，我完全改变了div应该如何排序。

现在，我将如何解决您的问题，就是在该列中添加 div ，以便在容器外部生成图像。

您可以使用 img 标记代替div。

我将使用 div 并对其应用背景图片向您展示一个示例。

如果我们应用下面的CSS，我们可以达到预期的效果：

.image {
  background-image: url('http://lorempixel.com/1024/768');
  background-repeat: no-repeat;
  background-size: cover;
  height: 500px;
  width: calc(50vw - 15px);
}

@media (max-width: 991px) {
  .image {
    width: 100%;
  }
}

注意：我们可以将视口宽度单位用于列中的 div ，然后通过计算它来取消网格装订线宽度上面的方式。

说明：视口宽度（ vw ）是一个计算当前屏幕整体宽度的单位，从不关注父div的大小。

我可以使用它吗？现在大多数现代浏览器都支持vw。 http://caniuse.com/#feat=viewport-units

对于 @media 查询，我认为在较小的屏幕中， md 图像应该100％应用。

您可以在下面的Codepen中看到这个工作： http://codepen.io/ArdianPerlaska/pen/dMqWKp

Answer 9

我使用绝对位置元素作为容器的兄弟。 见codepen：

 .absolute {
  position: absolute;
  width: 100%;
  height: 500px; //this needs to be fixed always, can be customized through media queries
  .white, .gray {
    float: left;
        width: 100%;
    height: 200px;
    background-color: #e3e3e3;
    @media (min-width:576px){  //make it match with the switch columns/trigger with columns changes
    width: 50%;
    height: 100%;
    }
  }
  .gray {
    background-color: gray; 
    background-image: url('http://www.dailyfreepsd.com/wp-content/uploads/2013/09/sunset-blurred-background-freebie.jpg');
    background-size:cover;    
  }
}


.fixed-height{
  height: 200px; //this needs to be fixed always, can be customized through media queries
  .title, .lead, .list{
    color:white;
  }

}

https://plnkr.co/edit/UlrfL6ocFdHjAegsS6wp?p=preview