css - 使具有绝对元素的部分响应

Question

我正在构建一个响应式网站，一切正常，除了一件事，即包含一些具有绝对定位的元素的服务部分没有响应。

我想要的是，当我减小视口(viewport)宽度时，元素会缩小一点并彼此靠近，并且在大视口(viewport)中它们会扩展以占据整个可用空间。

我曾尝试通过使用媒体查询来获得此行为，但我认为这不是最佳解决方案。

这是我的代码的 snippet。

HTML

  <section class="services">
    <img class="service-image" src="https://images.unsplash.com/photo-1474564862106-1f23d10b9d72?ixlib=rb-1.2.1&auto=format&fit=crop&w=1068&q=80" alt="">
    <h1 class="title-service">
      services
    </h1>
    <div class="quality-cuisine-box">
      <i class="fas fa-concierge-bell icon cuicon"></i>
      <h2 class="service-title">quality cuisine</h2>
      <p class="service-description">Le Lorem Ipsum est <br>
        simplement du faux
      </p>
    </div>
    <div class="freindly-staff-box">
      <i class="fas fa-smile-beam icon cuicon"></i>
      <h2 class="service-title">freindly staff</h2>
      <p class="service-description">Le Lorem Ipsum est <br>
        simplement du faux</p>
    </div>
    <div class="fresh-food-box">
      <i class="fas fa-fish icon cuicon"></i>
      <h2 class="service-title">fresh food</h2>
      <p class="service-description">Le Lorem Ipsum est <br>
        simplement du faux</p>
    </div>

  </section>

CSS

   .service-image {
      max-width: 100%;
      width: 100vw;
      position: relative;
    }

    .services {
      position: relative;
    }

    .title-service {
      position: absolute;
      color: white;
      top: 0;
      width: 100%;
      text-align: center;
      font-family: Roboto;
    }

    .cuicon {
      display: block;
      text-align: center;
      font-size: 1.5rem;
    }

    .quality-cuisine-box {
      position: absolute;
      top: 2.25rem;
      color: white;
      font-family: roboto;
      font-size: 0.75rem;
    }

    .freindly-staff-box {
      position: absolute;
      color: white;
      font-family: roboto;
      font-size: 0.75rem;
      top: 2.25rem;
      left: 10rem;

    }

    .fresh-food-box {
      position: absolute;
      color: white;
      font-family: roboto;
      font-size: 0.75rem;
      top: 2.25rem;
      left: 19rem;
    }

Answer 1

将图像作为绝对图像覆盖视口(viewport)，并从所有其他元素中移除绝对图像。或者您可以使用 display:flex 使您的布局更健壮。

    .services {
      position: relative;
      overflow: hidden;
    }

    .quality-cuisine-box, .freindly-staff-box, .fresh-food-box {
      color: white;
      font-family: roboto;
      font-size: 0.75rem;
      float: left;
      width: 33%;
      vertical-align: middle;
    }
    .service-image {
      max-width: 100%;
      width: 100vw;
      position: absolute;
      z-index: -1;
    }