Quasar应用服务板块斜切背景图适配及移动端布局调整需求

问题 #

在Quasar应用的服务板块中设置了斜切背景色，希望左右两侧的图片能填满斜切区域的高度，宽度为屏幕的一半（采用两列布局），实现图片被斜切蒙版裁剪，上下边缘贴合斜切效果。额外需求：完成图片适配后，移动端需保持图片堆叠在文字上方，同时保留顶部斜切效果。

解决方案 #

1. 调整模板结构 #

修改图片容器的类名与布局属性，为样式控制提供基础：

<template>
  <div class="q-pa-lg text-center column no-wrap flex-center block-wrapper" id="Services">
    <h2 class="text-h2 text-weight-bolder text-dark q-mb-xs">SERVICES</h2>
    <div class="divider">
      <span></span><span>
        <q-icon color="primary" size="30px" name="fa-solid fa-lightbulb" class="q-ma-sm"/>
      </span><span></span>
    </div>
    <h6 class="text-h6 text-weight-light text-dark q-mt-none">Light The Way offers a variety of electrical services from electrical diagnostics and repairs, service panel upgrades, new wiring for home improvement projects, lighting, and commercial services.</h6>
  </div>
  <div class="printing-block relative" id="DecksAndPatios">
    <div class="skew-c"></div>
    <div class="colour-block">
      <div class="row q-pa-md block-wrapper reverse-sm">
        <div class="col-sm-6 col-xs-12 column flex-center q-pa-0 service-image-wrapper">
          <q-img
            src="~assets/imgs/services/deck-services.jpg"
            spinner-color="white"
            class="full-width full-height"
          />
        </div>
        <div class="col-sm-6 col-xs-12 column justify-center q-pa-md">
          <h4 class="text-h4 text-dark text-weight-bolder">ELECTRICAL REPAIRS</h4>
          <p class="text-grey-7">Electrical issues can arise from a variety of things and can cause flickering lights, tripped breakers, nonfunctioning outlets, and much more. Although sometimes these issues may be harmless other times they can result in unsafe conditions. It is best to have a licensed electrician ensure your home is correctly wired and everything is functioning as it should. </p>
          <h5 class="text-h5 text-dark text-weight-bold text-left q-mb-none">WHY CHOOSE US?</h5>
          <q-separator class="q-my-md"/>
          <ul class="text-grey-7" style="padding: 0;">
            <li>There is very little we haven't encountered so you can feel comfortable we can fix the issue</li>
            <li>Licensed and insured with over 30 years of experience means you get top quality workmanship</li>
            <li>We will ensure all projects are up to code to ensure a safe living environment</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="skew-cc"></div>
    <div class="white-block" id="HomeRemodeling">
      <div class="row justify-center q-pa-md block-wrapper">
        <div class="col-sm-6 col-xs-12 column flex-center q-pa-0 service-image-wrapper">
          <q-img
            src="~assets/imgs/services/remodel-services.jpg"
            spinner-color="white"
            class="full-width full-height"
          />
        </div>
        <div class="col-sm-6 col-xs-12 column justify-center q-pa-md block-wrapper">
          <h4 class="text-h4 text-dark text-weight-bolder">INTERIOR & EXTERIOR REMODELING</h4>
          <p class="text-grey-7">Some of our most popular interior remodeling projects include kitchen remodeling, full bathroom renovations, and basement finishing. For exterior remodeling projects we do siding replacement, roofing, gutter replacement, doors, windows, and trim.</p>
          <h5 class="text-h5 text-dark text-weight-bold text-left q-mb-none">HIGHLIGHTS?</h5>
          <q-separator class="q-my-md"/>
          <ul class="text-grey-7" style="padding: 0;">
            <li>We only use brand name products that have a proven track record (i.e., Certainteed siding, GAF roofing, etc.)</li>
            <li>Variety of design options available including granite counter tops, solid wood cabinets, custom tiling and backsplashes</li>
            <li>We do our best to keep a clean worksite so you can still use your house while the job is being completed</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="skew-c"></div>
    <div class="colour-block" id="NewConstruction">
      <div class="row justify-center q-pa-md block-wrapper reverse-sm">
        <div class="col-sm-6 col-xs-12 column flex-center q-pa-0 service-image-wrapper">
          <q-img
            src="~assets/imgs/services/construction-services.jpg"
            spinner-color="white"
            class="full-width full-height"
          />
        </div>
        <div class="col-sm-6 col-xs-12 column justify-center q-pa-md">
          <h4 class="text-h4 text-dark text-weight-bolder">NEW CONSTRUCTION</h4>
          <p class="text-grey-7">Here at Deck Commander we pride ourselves on being able to tackle any job of any size. This includes home additions, in-law suites, master bedroom suites, and even new home construction.</p>
          <h5 class="text-h5 text-dark text-weight-bold text-left q-mb-none">SO WHATS ALL THE HYPE ABOUT?</h5>
          <q-separator class="q-my-md"/>
          <ul class="text-grey-7" style="padding: 0;">
            <li>We have built complete houses for customers so we know every aspect of the home building process</li>
            <li>Adding on to old home structures requires care and attention to detail which is something we ensure</li>
            <li>Communication is key to small and large projects but especially to large rennovation. So we work with you every step of the process to ensure you get exactly what you want</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="skew-cc"></div>
    <div class="white-block"></div>
  </div>
</template>

2. 更新SCSS样式 #

通过容器裁剪、定位调整实现图片贴合斜切边缘，同时适配移动端：

<script setup>
  import { ref } from 'vue'
</script>
<style lang="scss" scoped>
  .block-wrapper{
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
  }
  /* 分割线样式 */
  .divider {
    display: table;
    font-size: 24px;
    text-align: center;
    width: 75%;
    margin: 10px auto 40px;
  }
  .divider span {
    display: table-cell;
    position: relative;
  }
  .divider span:first-child,
  .divider span:last-child {
    width: 50%;
    top: 13px;
    background-size: 100% 2px;
    background-position: 0 0, 0 100%;
    background-repeat: no-repeat;
  }
  .divider span:first-child {
    background-image: linear-gradient(90deg, transparent, #000);
  }
  .divider span:nth-child(2) {
    color: #000;
    padding: 0px 5px;
    width: auto;
    white-space: nowrap;
  }
  .divider span:last-child {
    background-image: linear-gradient(90deg, #000, transparent);
  }

  /* 斜切区块核心样式 */
  .printing-block {
    position: relative;
  }
  .colour-block {
    background:#F5F5F5;
    width:100%;
    padding: 0 0 100px;
  }
  .white-block {
    background:#fff;
    width:100%;
    padding: 0 0 100px;
  }
  /* 图片裁剪容器 */
  .service-image-wrapper {
    overflow: hidden;
    position: relative;
    height: calc(100% + 100px);
    margin: -50px 0;
  }
  .service-image-wrapper .full-width.full-height {
    object-fit: cover;
  }
  /* 斜切元素定位 */
  .skew-cc{
    width:100%;
    height:100px;
    position:absolute;
    left:0;
    bottom: 0;
    background: linear-gradient(to right bottom, #F5F5F5 49%, #fff 50%);
  }
  .skew-c{
    width:100%;
    height:100px;
    position:absolute;
    left:0;
    top: 0;
    background: linear-gradient(to left bottom, #fff 49%, #F5F5F5 50%);
  }
  /* 移动端适配 */
  @media (max-width: 600px) {
    .service-image-wrapper {
      height: auto;
      margin: 0;
      padding: 0 0 20px;
    }
    .colour-block, .white-block {
      padding: 20px 0 100px;
    }
  }
</style>

核心逻辑说明 #

• 给图片容器设置height: calc(100% + 100px)和margin: -50px 0，让容器覆盖上下斜切区域，再通过overflow: hidden裁剪超出部分，实现图片贴合斜切边缘
• object-fit: cover保证图片按比例填充容器，避免拉伸变形
• 调整斜切元素的定位为top:0或bottom:0，确保与区块边缘精准对齐
• 移动端重置图片容器的高度与外边距，让图片正常堆叠在文字上方，保留斜切效果

内容的提问来源于stack exchange，提问作者Qiuzman