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

I would like to display the image outside the containers width, filling up to right edge of the browser.

我想在容器宽度之外显示图像,填充到浏览器的右边缘。

At the moment I'm doing this with JavaScript, but I feels and looks clumsy, and SEO is unfriendly because of missing ALT-tags and also introduces problems when the css triggers different viewport settings for smaller screens.

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

Is there a documentation chapter I've missed?

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

My current set up:

我目前的设置:

<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');
        });
    }
});

To better illustrate what I'm after, I've put my Word drawing skills to the test since I'm not at my own computer at the moment ;)

为了更好地说明我所追求的目标,我已经将我的Word绘图技巧进行了测试,因为我现在不在我自己的计算机上;)

9 个解决方案

#1

You can use the vw unit to set the image width to 50% of the viewport width. You will need to zero out the padding on grid cell which wraps the image. The vw unit is supported by all major browsers:

您可以使用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>

9 个解决方案

#1

更多相关文章

随机推荐