背景图像适合带有引导列的 div 宽度和高度 - PARALLAX答案

【问题标题】：background image fit on the div width and height with bootstrap columns - PARALLAX背景图像适合带有引导列的 div 宽度和高度 - PARALLAX
【发布时间】：2019-08-09 12:27:00
【问题描述】：

我有一个具有不同背景图像的 div，并且必须是视差，但背景图像始终为 100%，并且连接到主体的宽度。

代码如下：

<div class="row">
<div class="col-md-6" style="padding: .2em;">
   <div class="type-card" style="background-image: url(https://d4kkpd69xt9l7.cloudfront.net/sys-master/images/h70/h02/9215436357662/razer-viper-B-950x580-desktop.jpg);">

  </div>
</div>
<div class="col-md-6" style="padding: .2em;">
  <div class="type-card" style="background-image:url(https://d4kkpd69xt9l7.cloudfront.net/sys-master/images/h10/hc4/9211330592798/Lynette-Core-Promo-B-954x580-desktop.jpg);">

  </div>
</div>
<div class="col-md-6" style="padding: .2em;">
  <div class="type-card" style="background-image:url(https://d4kkpd69xt9l7.cloudfront.net/sys-master/images/h36/h37/9201084170270/BTS-Zone-B-954x580-desktop.jpg)">

  </div>
</div>
<div class="col-md-6" style="padding: .2em;">
  <div class="type-card" style="background-image:url(https://d4kkpd69xt9l7.cloudfront.net/sys-master/images/h0f/hc7/9211330658334/Silver-Store-Promo-B-954x580-desktop.jpg)">

  </div>
</div>
<div class="col-md-6" style="padding: .2em;">
  <div class="type-card" style="background-image:url(https://d4kkpd69xt9l7.cloudfront.net/sys-master/images/h90/hc7/9193016623134/razer-kraken-x-B-950x580-desktop.jpg)">

  </div>
</div>
<div class="col-md-6" style="padding: .2em;">
  <div class="type-card" style="background-image:url(https://d4kkpd69xt9l7.cloudfront.net/sys-master/images/hd5/h3b/9185281343518/razer-insider-B-950x580-desktop.jpg)">

  </div>
</div>
<div class="col-md-6" style="padding: .2em;">
  <div class="type-card" style="background-image: url(https://media.steelseriescdn.com/thumbs/filer_public/cb/43/cb43b953-4b2f-4c35-8a77-01964ca5717a/fronttile_apexpro_001.jpg__1920x600_q100_crop-scale_optimize_subsampling-2.jpg);">

  </div>
</div>
<div class="col-md-6" style="padding: .2em;">
  <div class="type-card" style="background-image: url(https://media.steelseriescdn.com/thumbs/filer_public/bc/91/bc91a8cc-a2df-40d4-9354-a42f37bcb82d/r650_front_page_001.jpg__1920x600_q100_crop-scale_optimize_subsampling-2.jpg);">

  </div>
</div>
</div>

我想使背景图片适合 div 的宽度和高度。请帮我解决这个问题，非常感谢！

【问题讨论】：

标签： html css background-image parallax

【解决方案1】：

在css下面添加

.type-card{
    height: 250px;
    background-position: center;
    background-size: cover;}

.type-card{
    height: 250px;
    background-position: center;
    background-size: cover;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet"/>
<div class="row">
  <div class="col-md-6" style="padding: .2em;">
    <div class="type-card" style="background-image: url(https://d4kkpd69xt9l7.cloudfront.net/sys-master/images/h70/h02/9215436357662/razer-viper-B-950x580-desktop.jpg);">

    </div>
  </div>
  <div class="col-md-6" style="padding: .2em;">
    <div class="type-card" style="background-image:url(https://d4kkpd69xt9l7.cloudfront.net/sys-master/images/h10/hc4/9211330592798/Lynette-Core-Promo-B-954x580-desktop.jpg);">

    </div>
  </div>
  <div class="col-md-6" style="padding: .2em;">
    <div class="type-card" style="background-image:url(https://d4kkpd69xt9l7.cloudfront.net/sys-master/images/h36/h37/9201084170270/BTS-Zone-B-954x580-desktop.jpg)">

    </div>
  </div>
  <div class="col-md-6" style="padding: .2em;">
    <div class="type-card" style="background-image:url(https://d4kkpd69xt9l7.cloudfront.net/sys-master/images/h0f/hc7/9211330658334/Silver-Store-Promo-B-954x580-desktop.jpg)">

    </div>
  </div>
  <div class="col-md-6" style="padding: .2em;">
    <div class="type-card" style="background-image:url(https://d4kkpd69xt9l7.cloudfront.net/sys-master/images/h90/hc7/9193016623134/razer-kraken-x-B-950x580-desktop.jpg)">

    </div>
  </div>
  <div class="col-md-6" style="padding: .2em;">
    <div class="type-card" style="background-image:url(https://d4kkpd69xt9l7.cloudfront.net/sys-master/images/hd5/h3b/9185281343518/razer-insider-B-950x580-desktop.jpg)">

    </div>
  </div>
  <div class="col-md-6" style="padding: .2em;">
    <div class="type-card" style="background-image: url(https://media.steelseriescdn.com/thumbs/filer_public/cb/43/cb43b953-4b2f-4c35-8a77-01964ca5717a/fronttile_apexpro_001.jpg__1920x600_q100_crop-scale_optimize_subsampling-2.jpg);">

    </div>
  </div>
  <div class="col-md-6" style="padding: .2em;">
    <div class="type-card" style="background-image: url(https://media.steelseriescdn.com/thumbs/filer_public/bc/91/bc91a8cc-a2df-40d4-9354-a42f37bcb82d/r650_front_page_001.jpg__1920x600_q100_crop-scale_optimize_subsampling-2.jpg);">

    </div>
  </div>
</div>

【讨论】：

谢谢 xenio，但问题是视差在 2 列中工作？谢谢你。 :D
嗨，我没听明白。
你给我的视差在全宽100% 工作，背景图像也是 100%，但我想 100% 将背景图像分成 2 列，但输出是背景图片为 100%，但 div 仅为 50% 宽度。
但是你给了 col-md-6 类，它将显示 50% 宽度的 div。