时间戳

首页 > 解决方案 > 如何使图像全宽，并为较小的浏览器动态调整大小？

css - 如何使图像全宽，并为较小的浏览器动态调整大小？

问题描述

在此页面中，我试图将顶部的矩形图像设置为全宽。我试图给它几个不同的属性，但最接近我想要的效果是：

.dla-ciebie__services .dlaciebie-header-image {
    background-image: url(images/dla-ciebie/dlaciebie-1600.jpg);
    background-size: contain;
    background-position-y: top;
    background-repeat: no-repeat;
    width: 100vw;
    min-height: 100vh;
}

这是包含此元素和下一个块的 HTML：

<div class="dla-ciebie">
    <section class="dla-ciebie__services">
        <div class="dlaciebie-header-image"></div>
        <em class="services-intro">Chcę powiedzieć Ci coś bardzo ważnego...<br>nie urodziłaś się po to, by żyć nieświadomie, w bólu i z dużym bagażem zmartwień. Jesteś tu dlatego, że masz w sobie <strong>ogromną siłę, która czeka, aż pozwolisz jej udowodnić swoją moc!</strong>
        </em>
        <div class="services-background">

这是完整的 SCSS：

.dla-ciebie__services {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  margin-top: 40px;
  .dlaciebie-header-image {
    background-image: url(images/dla-ciebie/dlaciebie-1600.jpg);
    background-size: contain;
    background-position-y: top;
    background-repeat: no-repeat;
    width: 100vw;
    /* height: 289px; */
    min-height: 100vh;
  }
  .services-intro {
    font: 40px/60px "Libre Baskerville";
    color: $bluedark;
    width: 60%;
    text-align: center;
    br {
      margin: 0;
    }
    strong {
      font-weight: bold;
    }

    @media (max-width: 900px) {
      width: 88%;
      font-size: 28px;
      line-height: 54px;
    }
    @media (max-width: 500px) {
      font-size: 18px;
      line-height: 32px;
    }
  }
  .services-background {
    background-image: url("images/blue-painting-1200.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 80px;
    width: 100%;
  }

}

在这里我不能以 px 为单位给出静态高度，因为如果我给它一个静态高度，在较小的浏览器上，图像会改变它的比例。

同时我做的也不好，因为它在图像下方添加了某种空白。如果您缩短浏览器窗口的宽度，您将看到图像下方的空白区域增加了多少。

我想请你帮忙解决这个问题（如果可能的话避免使用 JS 解决方案）。我尝试了不同的教程，但似乎该站点是如何构建的，其他教程似乎不适用，因此我认为需要对此页面进行特定解决方案。

提前致谢。

标签： css

解决方案

不要通过添加来<div>用作图像。background-image相反，使用<img>元素，这就是为什么它被制作成 HTML。

要使其响应，请使用width: 100% 无高度。如果您这样设置，图像将使用浏览器自动调整大小。

这应该完美地工作：

.dla-ciebie__services {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  margin-top: 40px;
}

.dlaciebie-header-image {
  max-width: 100%;
}

.services-intro {
  font: 40px/60px "Libre Baskerville";
  color: $bluedark;
  width: 60%;
  text-align: center;
}

@media (max-width: 900px) {
  .services-intro {
    width: 88%;
    font-size: 28px;
    line-height: 54px;
  }
}

@media (max-width: 500px) {
  .services-intro {
    font-size: 18px;
    line-height: 32px;
  }
}
<div class="dla-ciebie">
  <section class="dla-ciebie__services">
    <img src="https://unsplash.it/1600/500" class="dlaciebie-header-image">
    <p class="services-intro">Chcę powiedzieć Ci coś bardzo ważnego...<br>nie urodziłaś się po to, by żyć nieświadomie, w bólu i z dużym bagażem zmartwień. Jesteś tu dlatego, że masz w sobie <strong>ogromną siłę, która czeka, aż pozwolisz jej udowodnić swoją moc!</strong>
    </p>
  </section>

  <!-- Other code -->
</div>

推荐阅读