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

Question

我想在容器外显示图像width,填充浏览器的右边缘.

目前我正在使用JavaScript进行此操作,但我感觉并且看起来很笨拙,并且SEO由于缺少ALT标签而不友好,并且当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

您可以使用该vw单位将图像宽度设置为视口宽度的 50%。您需要将包裹图像的网格单元上的填充置零。所有主要浏览器vw都支持该单元：

.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>