Bootstrap：如何将图像与浏览器边框对齐？答案

【问题标题】：Bootstrap: how to align images to the browser border?Bootstrap：如何将图像与浏览器边框对齐？
【发布时间】：2016-06-28 04:02:00
【问题描述】：

illustration of what i want

我希望某些 div 具有与浏览器边框对齐的相应图像（每个 div 的左侧或右侧）。

有没有不使用JS的方法？

目前我使用图像作为容器流体的背景：

<div class="container-fluid diamondBG">
    <div class="container">
      <div class="row" style="text-align:center;">
        <div style="display:inline-block; float:none; text-align:left;" class="col-md-9">
            Some text
        </div>
      </div>
    </div>
  </div>

CSS：

.diamondBG{
    background-image: url('images/diamondLarge.png');
    background-position: right;
    background-repeat: no-repeat;
 }

这不是解决方案，因为 bg 图像被裁剪到 div 的高度。不得指定 div 的高度。

【问题讨论】：

标签： css html image twitter-bootstrap-3 alignment

【解决方案1】：

解决方案是容器流体中带有“位置：绝对”和“右：0”或“左：0”的图像：

<div class="container-fluid">
    <img src="images\diamondLarge.png" style="position:absolute; right:0; margin-top:-60px;">
    <div class="container">
      <div class="row" style="text-align:center;">
        <div style="display:inline-block; float:none; text-align:left;" class="col-md-9">
            Some text
        </div>
      </div>
    </div>
</div>

【讨论】：

【解决方案2】：

嘿，我会跳它对你有帮助

<!DOCTYPE html>
<html>
<head>
    <title>ayuda</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <style type="text/css">
        *{
            padding:0 !important;
        }
    </style>
</head>
<body>

<div class="container-fluid">
  <div class="row">
    <div class="col-md-offset-10 col-md-2">
      <img src="http://urdunovels.info/wp-content/uploads/2015/03/green-city-gandhinagar-portal-bg.jpg" width="200"/>
    </div>
    <div class="col-md-2">
      <img src="http://urdunovels.info/wp-content/uploads/2015/03/green-city-gandhinagar-portal-bg.jpg" width="200"/>
    </div>
    <div class="col-md-offset-10 col-md-2">
      <img src="http://urdunovels.info/wp-content/uploads/2015/03/green-city-gandhinagar-portal-bg.jpg" width="200"/>
    </div>
    <div class="col-md-2">
      <img src="http://urdunovels.info/wp-content/uploads/2015/03/green-city-gandhinagar-portal-bg.jpg" width="200"/>
    </div>
  </div>
</div>

</body>
</html>

【讨论】：

这是非常糟糕的做法
谢谢sittelle。这不是我的问题的解决方案，因为图像和 div 的高度不能相互依赖。