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

Posted 2023-03-06

技术标签:

【中文标题】具有固定宽度网格和应跨越窗口宽度的图像的引导程序【英文标题】：Bootstrap with a fixed width grid and images that should span the window width 【发布时间】：2016-08-08 10:15:28 【问题描述】：

我想在容器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>

JavaScript：

$(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 绘图技能，因为我现在不在自己的电脑前；）

【问题讨论】：

这只是装饰吧？ - 我的目标是设计一个登陆/产品页面，其中包含一些应用内屏幕截图。因此，为此我想让图像完全向右（如果内容在右侧，则向左）。我们可以更改 html 吗？我们可以使用背景图像代替实际图像吗？有已知的高度吗？ Html 可以更改。牢记 SEO，我认为 img 比背景图像更受欢迎。高度因设备而异。目前没有特殊的 CSS。只需按照 Bootstrap 的网格系统创建视图即可。 【参考方案1】：

我用一个绝对位置元素作为容器的兄弟元素对其进行了编译。见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;

working pen here

【讨论】：

【参考方案2】：

您可以使用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"  />
      </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"  />
      </div>
      <div class="col-xs-6">
        This is some content inside a col-xx-6 cell
      </div>
    </div>
  </div>
</div>

【讨论】：

感谢您的回答，这正是我正在寻找的。 +1A，我特此授予您赏金。【参考方案3】：

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

你不应该在.container-fluid 之后有一个.container 在.container 之后你应该有一个.row

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

更新

您需要为您的container-fluid 提供width，然后使用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>

【讨论】：

感谢您的回复。你说我不能在容器流体之后立即拥有容器。但是我需要像您的示例一样使图像保持流畅，但是左侧容器（col-xs-6）中的内容我想在容器中，而不是完全跨越到左侧。我现在不在电脑前，但你的评论还是让我有些困惑。你能解释一下吗？所以我可以更好地帮助你嗨 Dippas，我的意思是我想要一个使用 container 而不是 container-fluid 的页面，因为我希望内容居中。在该容器中，例如，我想要一个 col-md-6 将内容放在该 container 宽度的左侧 50% 处。对于另外 50%，我想显示一个产品图像（网络应用程序屏幕截图），该图像在整个右侧页面（意思是，container 之外到屏幕上最右侧的像素）。这更好理解吗？我也会在问题中添加一个 img。我会尽快回复您。我现在在午餐时间。啊太棒了！我在问题中添加了一张图片。如果您有任何问题，请告诉我！【参考方案4】：

首先，我建议不要使用两个容器（加倍网格间距宽度），而只使用一个容器使用 row 以使每一列都像最初制作的那样对齐。

如下所示：

<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 并对其应用 background-image 向您展示一个示例。

如果我们应用下面的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使用视口宽度单位，并通过计算来去掉grid gutter width上面的方法。

解释：视口宽度（vw）是一个计算当前屏幕的整个宽度的单位，不管父div有多大。

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

至于 @media 查询，我假设在比 md 更小的屏幕上应该 100% 应用图像。

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

【讨论】：

感谢您的回复，但不是我想要的。为您的努力 +1。【参考方案5】：

我认为您不需要 javascript。当涉及到引导程序时，您只需要考虑一个难题中的所有部分。 container-fluid 使全宽屏幕成为可能。添加container col-md-6 使一列具有最大宽度。然后container-fluid col-md-6 制作一个半页列，没有最大宽度的图像到边缘。这是我的 codepen，上面那个人的一个更简洁的版本。

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

当然，在仍然使用引导程序的同时使用 css 制作自己的容器非常容易。

【讨论】：

感谢您的回复，但您的解决方案仍然错过了我想将内容放入容器中的事实（正如我稍后在问题中显示的图像）。不过，感谢您的帮助，为您的努力 +1。谢谢，我明白你的意思了。我继续并更新了我的代码笔。它非常高效，不需要覆盖任何引导 css。您唯一需要做的就是添加引导媒体查询以调整您希望它的外观。不管你是否使用它，我只是想让它工作:)【参考方案6】：

在全尺寸宽度部分之前结束容器，不要将容器与容器流体混合。你可以有多个容器（容器和容器流体一个接一个。如果你可以使用css，请不要使用js。使用引导网格。如果你不必覆盖旧浏览器，你也可以使用弹性网格来进行更复杂的对齐网格。如果你想要全屏背景，在更高的元素上使用带有封面属性的背景，例如在身体标签上。如果您想在居中网格下获得全宽解决方案，请将容器放在带有图像 bg 的 div 内。

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;

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

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

【讨论】：

这仍然使img标签未使用，出于搜索引擎优化的目的，我想要它。不过+1为你的努力。谢谢。【参考方案7】：

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

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");

【讨论】：

感谢您的帮助，但我并不是真的在寻找 javascript 解决方案。正如我所提到的，这对我来说似乎有点 hacky。已经给出了一个 Bootstrap/CSS 解决方案，也许它对你来说也很有趣。再次感谢。为您的努力 +1。【参考方案8】：

出现这种情况是因为您在 container-fluid 中使用了 container。请尝试用 row 类替换您的 container 类。它肯定会解决你的问题。

祝你好运。

【讨论】：

这仍然不能解决内容居中的问题（容器宽度）。不过，感谢您的帮助，+1 的努力。添加文本中心类和行，这也将解决这个问题。【参考方案9】：

试试下面的 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 填充无效，从而使图像覆盖整个屏幕。对于内容，我们需要相对位置。否则它将出现在.screen-image 元素下。在.screen-image .image-content上，我们需要设置.col-sm-12，让它在手机上覆盖整个屏幕。我们那里没有 2 列，因此用背景图片覆盖整个屏幕是有意义的。

编辑（img 标签）

带有 SEO 友好图像标签的示例：http://codepen.io/avladov/pen/bpKvYd

【讨论】：

这样，我仍然没有真正的<img/> 用于搜索引擎优化。但是，当我再次使用笔记本电脑时，我会尝试对您的解决方案进行一些修改。到目前为止，谢谢。

以上是关于具有固定宽度网格和应跨越窗口宽度的图像的引导程序的主要内容，如果未能解决你的问题，请参考以下文章

如何裁剪引导图像以获得所有图像的宽度 285 和高度 170？

是否可以有一个具有固定高度但可变宽度的元素的列流网格？

如何创建具有不同图像高度和宽度的图像网格滑块（砌体滑块）

如何在页面加载时将 Kendo 网格高度设置为固定值

如何裁剪 twitter 引导轮播图像

Kivy 网格布局固定了某些列的列宽