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

Question

我有一个包含不同背景图像的 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的宽度和高度。请帮我解决这个问题，非常感谢!

Answer 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>