html - 容器左侧的绝对图像

Question

我使用基础网格，但我需要保留此网格并制作一个带有全宽图像的绝对左列和右列，我已经制作了带有图像的右侧和带有文本和灰色背景的左侧。但是我不能做同样的事情，图像应该在左边，灰色背景在右边。

enter code here
<div class="form-banner form-banner--medium form-banner-placement--right">
    <div class="form-banner-container">
      <div class="form-banner-wrapper form-banner-wrapper--original"><img src="https://dummyimage.com/600x400/blue/fff&text=image+here">
        <div class="form-banner-left">
          <div class="row">
            <div class="columns"><span class="tag">recommended</span>
                <div class="spacer-15">&nbsp;</div>
              <h3>Monitoring</h3>
                <div class="spacer-30">&nbsp;</div>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias distinctio explicabo suscipit eligendi ratione asperiores unde amet expedita vero numquam magnam officiis veniam natus tempora in vel, ipsam cupiditate dolorem.</p>
                <div class="spacer-40">&nbsp;</div><a class="button secondary small">Read More</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  .form-banner {
     position: relative;
     background: white;
     overflow: hidden;
      }
  .form-banner img {
     position: absolute;
     top: 0;
     right: 0;
     left: 0;
       bottom: 0;
     }
  .form-banner-container {
     max-width: rem-calc(1200);
     height: 100%;
     margin-left: auto;
     margin-right: auto;
     padding-left: rem-calc(20);
     padding-right: rem-calc(20);
     }
     .form-banner-wrapper {
       height: 100%;
       margin: 0 -9600rem;
       padding-left: 9600rem;
       padding-right: 9600rem;
       position: relative;
       z-index: 0;
        }
      .form-banner-wrapper:before {
       content: "";
       z-index: -1;
       width: 50%;
        background-color: gray;
       }

     .form-banner-placement--right.form-banner .form-banner-wrapper {
        padding-bottom: rem-calc(100);
     }
   .form-banner-placement--right.form-banner .form-banner-wrapper img {
     position: absolute;
      top: 0;
      right: 9600rem;
      left: 50%;
      bottom: 0;
       z-index: -2;
     height: 100%;
     width: 50vw;
     object-fit: cover;
     object-position: 50% 50%;
   }
  .form-banner-placement--right.form-banner .form-banner-wrapper:before {
     position: absolute;
     top: 0;
     right: 0;
     left: 0;
     bottom: 0;
   }
  .form-banner-placement--right.form-banner .form-banner-wrapper:after {
    position: absolute;
    top: 0;
    right: 0;
    left: inherit;
    bottom: 0;
    content: "";
    background-color: #ffffff;
    opacity: 0.8;
    z-index: -1;
    width: 50%;
   }
   .form-banner-placement--right.form-banner .form-banner-wrapper--         original:after {
    opacity: 0;
    z-index: 0;
   }
   .form-banner-placement--right.form-banner .form-banner-left {
    position: absolute;
    top: 0;
    right: 50%;
    left: 9600rem;
    bottom: 0;
    padding-top: 5rem;
   }

   .form-banner--large .form-banner-left {
    padding: rem-calc();
   }

  .form-banner--920px .form-banner-left {
     padding: rem-calc();
     }

   .form-banner--125 {
    height: 85;
    }
   .form-banner--125 .form-banner-left {
     padding: rem-calc(160);
      }

   .form-banner--large {
       height: 920px;
    }

     .form-banner--medium {
      height: 466px;
      }

我在 codepen 上获取了代码 Codepen

Answer 1

看看吧，希望对你有帮助:

.form-banner {
  position: relative;
  background: white;
  overflow: hidden;
}

.form-banner-wrapper {
  height: 100%;
  margin: 0 -9600rem;
  padding-left: 9600rem;
  padding-right: 9600rem;
  position: relative;
  z-index: 0;
}

.form-banner-container {
  max-width: rem-calc(1200);
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: rem-calc(20);
  padding-right: rem-calc(20);
}

/*=========================================================
  01. #FORM BANNER PLACEMENT RIGHT
=========================================================*/
.form-banner-placement--right.form-banner .form-banner-wrapper {
  padding-bottom: rem-calc(100);
}
.form-banner-placement--right.form-banner .form-banner-wrapper img {
float: left;
z-index: -2;
height: 100%;
width: 50%;
object-fit: cover;
object-position: 50% 50%;
}
.form-banner-placement--right.form-banner .form-banner-wrapper:before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}
.form-banner-placement--right.form-banner .form-banner-wrapper:after {
  position: absolute;
  top: 0;
  right: 0;
  left: inherit;
  bottom: 0;
  content: "";
  background-color: #ffffff;
  opacity: 0.8;
  z-index: -1;
  width: 50%;
}
.form-banner-placement--right.form-banner .form-banner-wrapper--original:after {
  opacity: 0;
  z-index: 0;
}
.form-banner-placement--right.form-banner .form-banner-left {
width: 45%;
padding: 6rem 2.5%;
float: right;
background-color: gray;
}

/*=========================================================
  03. #FORM BANNER SIZE
=========================================================*/
.form-banner--large .form-banner-left {
  padding: rem-calc();
}

.form-banner--920px .form-banner-left {
  padding: rem-calc();
}

.form-banner--125 {
  height: 85;
}
.form-banner--125 .form-banner-left {
  padding: rem-calc(160);
}

.form-banner--large {
  height: 920px;
}

.form-banner--medium {
  height: 466px;
}

<div class="form-banner form-banner--medium form-banner-placement--right">
        <div class="form-banner-container">
          <div class="form-banner-wrapper form-banner-wrapper--original"><img src="https://dummyimage.com/600x400/blue/fff&text=image+here">
            <div class="form-banner-left">
              <div class="row">
                <div class="columns"><span class="tag">recommended</span>
                    <div class="spacer-15">&nbsp;</div>
                  <h3>Monitoring</h3>
                    <div class="spacer-30">&nbsp;</div>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias distinctio explicabo suscipit eligendi ratione asperiores unde amet expedita vero numquam magnam officiis veniam natus tempora in vel, ipsam cupiditate dolorem.</p>
                    <div class="spacer-40">&nbsp;</div><a class="button secondary small">Read More</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

Fiddle Demo