Question

我在bootstrap卡div中有图像，它们位于col div

内

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-8 col-lg-8 B">
      <div class="card card-inverse" style="background-color: #333; border-color: #333;">
        <img class="img-fluid" src="http://lorempicsum.com/rio/800/500/4" alt="Responsive image">
      </div>
    </div>
    <div class="col-md-4 col-lg-4 row">
      <div class="col-md-6 col-lg-6 B">
        <div class="card card-inverse" style="background-color: #333; border-color: #333;">
          <img class="img-fluid" src="http://lorempicsum.com/rio/800/500/4" alt="Responsive image">
        </div>
      </div>
      <div class="col-md-6 col-lg-6 B">
        <div class="card card-inverse" style="background-color: #333; border-color: #333;">
          <img class="img-fluid" src="http://lorempicsum.com/rio/800/500/4" alt="Responsive image">
        </div>
      </div>
      <div class="col-md-12">
        <div class="card card-inverse" style="background-color: #333; border-color: #333;">
          <img class="img-fluid" src="http://lorempicsum.com/rio/800/500/3" alt="Responsive image">
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

我想在所有col div空间都有图像。我怎么能实现这一目标？

如何扩展图像以填补我用黑线表示的空白

Answer 1

如您所述，您只想消耗col div（左右空白区域）内的所有空间。

您需要做的是将padding-left: 15px; padding-right: 15px的引导列的默认填充减少到0px。它会对你有用。

有时你的样式会被引导样式重载。因此，在这种情况下，您必须使用带有CSS属性的关键字!important来重载为该特定属性定义的所有其他CSS样式。

.zero-padding {
  padding: 0px !important;
}

要强制图像使用col div中的所有空间，您必须使用以下CSS。

.fill-space {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.fill-space img {
  flex-shrink: 0;
  min-width: 100%;
  min-height: 100%;
}

为了强制右侧的图像将上面2幅图像的50％高度和50％的高度拍摄到下图中;你应该使用以下的CSS。

.half-height{
    height: 50%;
}

输出：

以下工作片段：

.zero-padding {
  padding: 0px !important;
}

.fill-space {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.fill-space img {
  flex-shrink: 0;
  min-width: 100%;
  min-height: 100%;
}

.half-height{
    height: 50%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-8 col-lg-8 B">
      <div class="card card-inverse" style="background-color: #333; border-color: #333;">
        <img class="img-fluid" src="http://lorempicsum.com/rio/800/500/4" alt="Responsive image">
      </div>
    </div>
    <div class="col-md-4 col-lg-4 row zero-padding">
      <div class="col-md-6 col-lg-6 B zero-padding half-height">
        <div class="card card-inverse fill-space" style="background-color: #333; border-color: #333;">
          <img class="img-fluid" src="http://lorempicsum.com/rio/800/500/4" alt="Responsive image">
        </div>
      </div>
      <div class="col-md-6 col-lg-6 B zero-padding half-height">
        <div class="card card-inverse fill-space" style="background-color: #333; border-color: #333;">
          <img class="img-fluid" src="http://lorempicsum.com/rio/800/500/4" alt="Responsive image">
        </div>
      </div>
      <div class="col-md-12 zero-padding half-height">
        <div class="card card-inverse fill-space" style="background-color: #333; border-color: #333;">
          <img class="img-fluid" src="http://lorempicsum.com/rio/800/500/3" alt="Responsive image">
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

过去，我使用了一些小的javascript来实现这一目标。隐藏图像但将其用作完整背景。

＆＃13;

$(function() {
  $('.full-image').each(function() {
    var img = $(this).find('img');
    $(this).css('background-image', 'url(' + img.attr('src') + ')');
    img.css('visibility', 'hidden');
  });
});

＆＃13;

.full-image-wrapper {
  position: relative;
  border-radius: 3px;
  overflow: hidden;
  min-height: 120px !important;
}

.full-image {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-8 col-lg-8 B">
      <div class="card card-inverse" style="background-color: #333; border-color: #333;">
        <img class="img-fluid" src="http://lorempicsum.com/rio/800/500/4" alt="Responsive image">
      </div>
    </div>
    <div class="col-md-4 col-lg-4 row">
      <div class="col-md-6 col-lg-6 B full-image-wrapper">
        <div class="full-image">
          <img class="img-fluid" src="http://lorempicsum.com/rio/800/500/4" alt="Responsive image">
        </div>
      </div>
      <div class="col-md-6 col-lg-6 B full-image-wrapper">
        <div class="full-image">
          <img class="img-fluid" src="http://lorempicsum.com/rio/800/500/4" alt="Responsive image">
        </div>
      </div>
      <div class="col-md-12 full-image-wrapper">
        <div class="full-image">
          <img class="img-fluid" src="http://lorempicsum.com/rio/800/500/3" alt="Responsive image">
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

如果没有JavaScript，这仍然有用。您可能需要做更多工作才能使移动/平板电脑视图达到最佳状态。我必须强制min-height来覆盖引导行为。

如何删除div

2 个答案:

输出：

以下工作片段：