从中心扩展调整图像大小 CSS

Question

我在页面上有一张 header 图片，我想从中心调整大小，但默认情况下图片从上向下调整大小，因此图片的底部而不是顶部被截断，底部一样。我创建了一个 Fiddle 来重现问题，下面的代码与 fiddle 中的相同。您可以看到，随着 window 的大小调整变得更大，圆圈从视图中被切断。

<div class="header-image" style="background-image: url(https://i.imgur.com/5AcO0gW.png) !important;">
  <div class="line">
    <hr class="position-absolute bluestrikethrough">
  </div>
  <div style="flex-grow: 0; flex-shrink: 0; ">
    <h1 style="font-family: MillerItalic, Georgia, serif; font-size: 4em;" class="text-primary font-italic px-3">Big ol Title </h1>
  </div>
  <div class="line">
    <hr class="position-absolute bluestrikethrough">
  </div>
</div>
<div class="container">
  <div class="py-3 px-5 border-bottom">
    <h6>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </h6>
  </div>
</div>

  .bluestrikethrough {
    z-index: 5;
    top: 1.5em;
    width: 100%;
    border: none;
    height: 3px;
    color: #007bff;
    /* old IE */
    background-color: #007bff;
    /* Modern Browsers */
  }

  .header-image {
    display: flex;
    background-size: cover !important;
    background-color: #919191;
    width: 100%;
    border-radius: 0px !important;
    padding-top: 7rem !important;
    padding-bottom: 6rem !important;
    margin-bottom: 0px;
    margin-top: 0px !important;
  }

  .line {
    position: relative;
    width: 100%;
  }

  ul {
    list-style-type: none;
  }

  @media (max-width: 480px) {
    .header-image {
      padding-bottom: 70px;
    }
  }

Answer 1

这可以通过 background-position 属性来完成。我只是像这样添加它：

.header-image {
    background-size: cover !important;
    background-color: #919191;
    width: 100%;
    background-position: center; /*This line */
    border-radius: 0px !important;
    padding-top: 7rem !important;
    padding-bottom: 6rem !important;
    margin-bottom: 0px;
    margin-top: 0px !important;
}

虽然我最终选择了 background-position: 50% 38%; 作为我的真实形象。

从中心扩展调整图像大小 CSS

Resize Image Expanding from Center CSS

html

css

responsive-design

twitter-bootstrap