时间戳

首页 > 解决方案 > 调整从中心 CSS 扩展的图像大小

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

问题描述

我在页面上有一个标题图像，我想从中心调整大小，但默认情况下，图像从上到下调整大小，因此图像的底部被切掉，而不是顶部和底部均等。我创建了一个小提琴来重新创建问题，以下代码与小提琴中的代码相同。您可以看到，随着窗口的大小被调整为更大，圆圈被从视图中截断。

<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;
    }
  }

标签： htmlcsstwitter-bootstrapresponsive-design

解决方案

这可以通过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%;我的真实形象。

推荐阅读