有没有办法用 css 或 jquery 删除或隐藏图像的一部分

Question

我正在制作一个具有特定背景图片的网站。当它改变屏幕尺寸时，我需要移除图像的中间部分，以便图形看起来更苗条。这是图片。

现在是这样的：

这就是我在屏幕更改为平板电脑时需要它的方式：

我的html：

<section class="hero" style="background-image: url(./images/hero.png)">
<header class="header">
  <img src="./images/logo.png" alt="Logo image" class="logo">
  <div class="shape hamburger">
    <!-- <a href="javascript:;" class="line-shape"><span class="hide">Hamburger icon</span></a> -->
    <a class="line-shape" href="javascript:;"><span></span><span class="hide">Hamburger icon</span></a>
    <span class="shape-txt" >MENU</span>
  </div>
</header>
<div class="row">
  <div class="col col-2 offset-2 col-2-t offset-2-t">
    <h1 class="section-title">
      Living our values
      Transforming our business
    </h1>
    <p class="txt">
      UDG Healthcare plc</br>
      Annual Report and Accounts 2015
    </p>
    <a href="javascript:;" class="padded"><span class="s s-down-arrow"><span class="hide">download</span></span>Download Full Report <span class="no-under">(PDF, 2.5 MB)</span></a>
  </div>
</div>
<span class="above-btn">Explore our year</br>
    in review</span>
<button type="button" class="down"><img src="./images/down.png" alt="Move to the top content"><span class="s s-down-arrow btn-arrow"><span class="hide">Move Down</span></span></button>

我的CSS：

.hero {
  background-repeat: no-repeat;
  background-size: cover;
  background-color: $hero-bg-cream;
  overflow: hidden;

  .row {
    margin: 0;
  }

  h1 {
    padding: 106px 0 7px;
    line-height: 1.15;
    word-spacing: 5px;
    letter-spacing: 0px;
    width: 70%;
    font-size: 40px;
    color: $grey;
  }

  .txt {
    line-height: 19px;
    padding-bottom: 14px;
    color: $grey;
  }

  .padded {
    padding-bottom: 421px;
  }

  .s-down-arrow {
    &:last-child {
      left: -38px;
      color: $grey;
      top: 0;
    }
  }

  .above-btn {
    font-size: 14px;
    text-align: center;
    display: block;
    padding-bottom: 16px;
    color: $grey;
  }

  .down {
    transform: translateX(13%);
  }

  @include breakpoint (tablet) {
    h1 {
      font-size: 29px;
      padding: 217px 0 7px;
    }

    .txt {
      padding-bottom: 10px;
    }

    .padded {
      padding-bottom: 308px;
    }

    .down {
      transform: translateX(10%);
    }
  }
}

我想我需要删除图像的右侧部分或类似的东西？

Answer 1

您可以在 HTML 中执行此操作：

<section class="hero" style="background-image: url(./images/hero.png); background-size: 100% 100%;">

或者在这里，在 CSS 中

.hero {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-color: $hero-bg-cream;
  overflow: hidden;

  .row {
    margin: 0;
  }

Answer 2

好的，所以解决方案是制作background-size: auto;