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>

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

1 个答案: