Flex网格和背景图像并排响应/缩放问题

Posted 2021-05-02

这是我的问题：我正在尝试创建一个并排广告，其中左侧只是一个图像，右侧是一个背景图像，图像，文本和5个响应式flexgrid按钮嵌套在它上面。

我想出了如何将所有内容分层放在背景图像之上，但是现在我不能为我的生活弄清楚如何使背景图像容器随着图像向左移动。我一直在调整百分比和利润几个小时，现在试图解决这个问题。

我设法在某个屏幕尺寸（2560x1440）上非常接近，但随着窗口调整大小，背景图像容器最终调整大小与图像不同。我想到的一个解决方案就是创建10个媒体查询断点，我调整边距和填充以使图像大小相同，但老实说，我宁愿找到一种更有效，更清晰的方法。

请不要判断我的代码，我知道它非常混乱！我仍在学习。

https://jsfiddle.net/y8nz39gL/3/

DESIRED RESULT

.flex-container {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  max-width: 100%;
  background-image: url('https://cdn.shopify.com/s/files/1/1017/0995/files/Luckyleo-Custom-Print-Floral-Background.jpg?13173226259512623367');
  background-position: 50 50;
  background-repeat: no-repeat;
  background-attachment: fixed;
  padding: 50px 0px 50px 0px;
}

.flex-container2 {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  max-width: 100%;
  margin-bottom: -100px;
}


/* NEW */

.flexbottommargin {
  margin-bottom: -50px;
}

.less-space-bottom {
  margin-bottom: -20px !important;
}


/*NEW OVER*/

.flex-container20 {
  padding-top: 35px;
  padding-bottom: 35px;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  max-width: 100%;
  margin-bottom: -75px;
}

.flex-container21 {
  padding-top: 35px;
  padding-bottom: 35px;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  max-width: 100%;
  margin-bottom: -75px;
}

.flex-container22 {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  max-width: 100%;
  margin-bottom: -100px;
  margin-top: -2px;
}

.flex-container23 {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  max-width: 100%;
  margin-bottom: -100px;
  margin-top: -2px;
}

.flex-container-content2 img {
  padding-bottom: 15px;
}

.luckyleospacer {
  padding-bottom: 20px;
}

.extrabottompadding {
  padding-bottom: 12px;
}

.extrabottompadding2 {
  padding-bottom: 20px;
}


/* NEW */

.flex-container-content-newyears {
  padding-top: 20px;
  width: 71%;
  /*NEW LINE*/
  align-items: center;
  align-self: center;
  justify-content: center;
  padding-bottom: 20px;
  text-align: center;
}

.flex-container-content-newyears-banner {
  padding-top: 20px;
  width: 64%;
  align-items: center;
  align-self: center;
  justify-content: center;
  padding-bottom: 20px;
  text-align: center;
}


/*NEW OVER*/

.flex-container-content {
  padding-top: 35px;
  width: 60%;
  align-items: center;
  align-self: center;
  justify-content: center;
  padding-bottom: 10px;
}

.flex-container-content2 {
  padding-top: 35px;
  width: 75%;
  align-items: center;
  align-self: center;
  justify-content: center;
  padding-bottom: 35px;
  text-align: center;
}

.flex-container-content22 {
  padding-top: 35px;
  width: 100%;
  align-items: center;
  align-self: center;
  justify-content: center;
}

.flex-container-content23 {
  width: 100%;
  align-items: center;
  align-self: center;
  justify-content: center;
}

.flex-container-content23 {
  padding-top: 35px;
  width: 100%;
  align-items: center;
  align-self: center;
  justify-content: center;
}

.flex-container-content24 {
  width: 100%;
  align-items: center;
  align-self: center;
  justify-content: center;
  padding-bottom: 55px;
  text-align: center;
}

.flex-container-content h1 {
  font-family: "Asap", sans-serif;
  font-size: 2.4vw;
  color: #292929 !important;
  text-transform: none !important;
  font-weight: 600;
  line-height: 1.3em;
  letter-spacing: 0px;
  padding: 4%;
}

.flexgrid-cell {
  margin-bottom: 0px;
}

.flex-container-content h2 {
  font-family: "Lavanderia", sans-serif !important;
  font-size: 4vw;
  color: #292929 !important;
  text-transform: none !important;
  font-weight: 400;
  line-height: 1.4em;
  margin-bottom: 35px;
  letter-spacing: 0px;
}

.flex-container-content2 h1 {
  font-family: "Lavanderia", serif !important;
  font-size: 50px;
  font-size: 3.5vw;
  color: #292929 !important;
  text-transform: none !important;
  font-weight: 500;
  line-height: 1.3em;
  letter-spacing: 0px;
}

.flex-container-content2 p {
  padding-top: 20px;
  color: #292929 !important;
  text-transform: none !important;
  padding-bottom: 20px;
}

.flex-container {
  max-width: 100%;
  margin: auto;
  //border: 1px solid red;
}


/*Basic flexgrid Styles*/

.flexgrid {
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
}

.u-textCenter {
  text-align: center;
  align-items: center;
  align-self: center;
  justify-content: center;
}

.flexgrid-cell {
  width: 100%;
  flex: 1;
}

.flexgrid-cell img {
  width: 100%;
}


/* Justify per row*/

.flexgrid--right {
  justify-content: flex-end;
}

.flexgrid--center {
  justify-content: center;
}


/* Alignment per row */

.flexgrid--top {
  align-items: flex-start;
}

.flexgrid--bottom {
  align-items: flex-end;
}

.flexgrid--center {
  align-items: center;
}


/* Alignment per cell */

.flexgrid-cell--top {
  align-self: flex-start;
}

.flexgrid-cell--bottom {
  align-self: flex-end;
}

.flexgrid-cell--center {
  align-self: center;
}


/*===========================================*/


/* Base classes for all media - Mobile first */

.flexgrid--cols-2 > .flexgrid-cell {
  flex: 0 0 100%;
}

.flexgrid--cols-3 > .flexgrid-cell {
  flex: 0 0 100%;
}

.flexgrid--cols-4 > .flexgrid-cell {
  flex: 0 0 100%;
}

.flexgrid--cols-6 > .flexgrid-cell {
  flex: 0 0 calc(50% - #{$gutter});
}

.flexgrid--cols-12 > .flexgrid-cell {
  flex: 0 0 calc(33.3333% - #{$gutter});
}


/* One of -- columns*/

.flexgrid--1of2 > .flexgrid-cell,
.flexgrid--1of4 > .flexgrid-cell:first-of-type,
.flexgrid--1of3 > .flexgrid-cell:first-of-type {
  flex: 0 0 100%;
}

.flexgrid--1of6 > .flexgrid-cell:first-of-type {
  flex: 0 0 50%;
}

.flexgrid--fit > .flexgrid-cell {
  flex: 1;
}

.flexgrid--full > .flexgrid-cell {
  flex: 0 0 100%;
}


/* Tablet (medium) screens */

@media (min-width: 30em) {
  .flexgrid--cols-4 > .flexgrid-cell {
    flex: 0 0 calc(50% - #{$gutter});
  }
  .flexgrid--cols-6 > .flexgrid-cell {
    flex: 0 0 calc(33.3333% - #{$gutter});
  }
  .flexgrid--cols-12 > .flexgrid-cell {
    flex: 0 0 calc(16.6666% - #{$gutter});
  }
  .flexgrid--holly-grail {
    .aside {
      flex: 1 calc(25% - #{$gutter});
    }
  }
  .flexgrid--1of2 > .flexgrid-cell {
    flex: 0 0 50%;
  }
  .flexgrid--1of6 > .flexgrid-cell:first-of-type {
    flex: 0 0 30%;
  }
  .flexgrid--1of4 > .flexgrid-cell:first-of-type {
    flex: 0 0 50%;
  }
  .flexgrid--1of3 > .flexgrid-cell:first-of-type {
    flex: 0 0 100%;
  }
}


/* Large screens */

@media (min-width: 48em) {
  .flexgrid--cols-2 > .flexgrid-cell,
  .flexgrid--cols-3 > .flexgrid-cell,
  .flexgrid--cols-4 > .flexgrid-cell,
  .flexgrid--cols-6 > .flexgrid-cell,
  .flexgrid--cols-12 > .flexgrid-cell {
    flex: 1;
  }
  .flexgrid--1of2 > .flexgrid-cell {
    flex: 0 0 50%;
  }
  .flexgrid--1of6 > .flexgrid-cell:first-of-type {
    flex: 0 0 16.6666%;
  }
  .flexgrid--1of4 > .flexgrid-cell:first-of-type {
    flex: 0 0 25%;
  }
  .flexgrid--1of3 > .flexgrid-cell:first-of-type {
    flex: 0 0 30%;
  }
  .flexgrid--gutters.flexgrid--nested {
    .flexgrid-cell:first-of-type {
      .Demo {
        margin-right: 0;
      }
    }
  }
}


/* 2/3rds COLUMN SPLIT */


/* NEW */

.flexgrid--half-l {
  flex-basis: 49.1%;
  max-width: 49.1%;
  margin-right: .6%;
}

.flexgrid--half-r {
  flex-basis: 50%;
  max-width: 50%;
  margin-left: .4%;
}

.flexgrid--1of3 {
  flex-basis: 57.188%;
  max-width: 57.188;
}

.desktopshowtop {
  padding-top: 57px;
}

.desktopshowtopbanner {
  padding-top: 57px;
}


/* NEW */

@media only screen and (min-width: 300px) and (max-width: 1024px) {
  .flex-container-content h2 {
    font-size: 12vw;
  }
  .flex-container-content h1 {
    font-size: 4.2vw;
  }
  .flex-container-content2 h1,
  h2 {
    font-size: 40px;
    font-size: 6.8vw;
  }
}

@media only screen and (min-width: 300px) and (max-width: 419px) {
  .flex-container-content2 h1,
  h2 {
    font-size: 40px;
    font-size: 8vw;
  }
}

@media only screen and (min-width: 300px) and (max-width: 1267px) {
  .whyispaddinghere {
    margin-bottom: -115px;
  }
  .flex-container-content {
    width: 90%;
  }
  .flex-container-content2 {
    width: 95%;
  }
}

@media only screen and (min-width: 1025px) {
  .flex-container21 {
    display: none;
  }
  .flex-container23 {
    display: none;
  }
}

@media only screen and (min-width: 300px) and (max-width: 1024px) {
  .flex-container20 {
    display: none;
  }
  .flex-container22 {
    display: none;
  }
}


/* NEW LINES - 2018 */


/* With gutters*/

$gutter: 1em;
.flexgrid--gutters {
  margin-left: -$gutter;
  .flexgrid-cell {
    padding-left: $gutter;
  }
  .flexgrid--nested {
    .flexgrid-cell:first-of-type {
      margin-right: 1em;
    }
  }
}


}
.flex-container-content-newyears {
  padding-top: 20px;
  width: 75%;
  /*NEW LINE*/
  
  align-items: center;
  align-self: center;
  justify-content: center;
  padding-bottom: 20px;
  text-align: center;
}
.flex-container-newyears {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  max-width: 100%;
}
.content-1of5:hover {
  background-color: #a36871;
}
.content-1of5 {
  background-color: #8d5760;
  -webkit-border-radius: 4;
  -moz-border-radius: 4;
  border-radius: 4px;
  font-family: "Asap", sans-serif;
  align-self: center;
  justify-content: center;
  align-items: center;
  padding-top: 6px;
  padding-bottom: 6px;
  margin-left: 7px;
  margin-right: 7px;
  margin-bottom: 7px;
  color: #fff;
}
.content-1of5 a {
  color: #fff !important;
}
.express-promo-right-side {
  background-image: url("https://cdn.shopify.com/s/files/1/2185/4785/files/Express-ShopYourSizebg.jpg?4927879912789524270");
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  margin: auto;
}
.express-promo-right-side img {
  padding-top: 5.4%;
  margin-top: 12px;
  max-width: 40% !important;
  margin-bottom: -5%;
}
.express-buttons-margin-top {
  padding: 14.0% 2% 4.0% 2%;
  margin-bottom: -9px;
}
.flexgrid--half-r {
  margin-bottom: 1%;
  margin-top: 1%;
}
.shopsizefrontpage {
  padding-top: 10%;
  margin-bottom: -10%;
  font-size: 5vw !important;
  line-height: 1.0em;
  font-family: 'Poppins';
  color: #fff !important;
  font-weight: 800;
}
.shopsizefrontpagered {
  color: #8d5760 !important;
}
.Grid--nested {
  .Grid-cell:first-of-type {
    .Demo {
      margin-right: 1em;
    }
  }
}

}

<div class="flex-container-newyears">
  <div class="flex-container-content-newyears">
    <div class="flexgrid flexgrid--gutters flexgrid--cols-3 u-textCenter">
      <div class="flexgrid--half-l flexgrid-cell">
        <a href="http://www.luckyleodancewear.com"><img src="https://cdn.shopify.com/s/files/1/2185/4785/files/Express-ShopYourSize.jpg?4927879912789524270" alt="Luckyleo How to Customize - Step 1" /></a>
      </div>
      <div class="flexgrid--half-r flexgrid-cell express-promo-right-side"><img src="https://cdn.shopify.com/s/files/1/2185/4785/files/Express-ShopYourSize2-logo.png?5263606338478632237" />
        <div class="flexgrid-cell shopsizefrontpage">SHOP <span class="shopsizefrontpagered"> YOUR SIZE</span></div>

        <div class="flexgrid flexgrid--gutters flexgrid--cols-4 u-textCenter express-buttons-margin-top">

          <div class="flexgrid-cell">
            <a href="https://www.luckyleodancewear.com/collections/luckyleoexpress-extra-extra-small-lucky-leos">
              <div class="content-1of5">XXS</div>
            </a>
          </div>
          <div class="flexgrid-cell">
            <a href="https://www.luckyleodancewear.com/collections/luckyleoexpress-extra-extra-small-lucky-leos">
              <div class="content-1of5">XXS</div>
            </a>
          </div>
          <div class="flexgrid-cell">
            <a href="https://www.luckyleodancewear.com/collections/luckyleoexpress-extra-extra-small-lucky-leos">
              <div class="content-1of5">XXS</div>
            </a>
          </div>
          <div class="flexgrid-cell">
            <a href="https://www.luckyleodancewear.com/collections/luckyleoexpress-extra-extra-small-lucky-leos">
              <div class="content-1of5">XXS</div>
            </a>
          </div>
          <div class="flexgrid-cell">
            <a href="https://www.luckyleodancewear.com/collections/luckyleoexpress-extra-extra-small-lucky-leos">
              <div class="content-1of5">XXS</div>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>


</div>

答案

而不是尝试将background-image的行为与<img>同步，只需在整个元素上使用background-image并控制指定不同宽度的height或min-height的比例。

这是一个首发。作为旁注，我发现你的标记方式对于期望的结果来说太复杂了，所以我简化了一下。

body {
  background-color: #f5f5f5;
  margin: 0;
  font-family: sans-serif;
}
.newyears {
  background: url(https://i.stack.imgur.com/oK65C.jpg) no-repeat 50% 50% /cover;
  display: flex;
  justify-content: flex-end;
  min-height: 30vw;
}
.nys-content {
  flex: 0 0 50%;
  display: flex;
  padding: 3rem 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-left: 10px solid white;
}
.nys-content img {
  width: 150px;
  margin-bottom: 1.5rem;
}
.nys-links {
  display: flex;
  align-items: center;
  justify-content: center;
}
.nys-links a {
  background-color: #900;
  color: white;
  text-decoration: none;
  margin: 3px;
  padding: .75rem;
  flex: 1 .1 20%;
  text-align: center;
}
@media (max-width: 768px) {
  
  .nys-links, .nys-links a {
    width: 60%;
  }
  .nys-links {
    flex-direction: column;
  }
}
@media (max-width: 540px) {
  .nys-content {
    flex: 1 0 auto;
    border-left: none;
  }
}

<div class="newyears">
  <div class="nys-content">
    <img src="https://cdn.shopify.com/s/files/1/2185/4785/files/Express-ShopYourSize2-logo.png?5263606338478632237">
    <div class="nys-links">
      <a href="https://www.luckyleodancewear.com/collections/luckyleoexpress-extra-extra-small-lucky-leos">XXS</a>
      <a href="https://www.luckyleodancewear.com/collections/luckyleoexpress-extra-extra-small-lucky-leos">XXS</a>
      <a href="https://www.luckyleodancewear.com/collections/luckyleoexpress-extra-extra-small-lucky-leos">XXS</a>
      <a href="https://www.luckyleodancewear.com/collections/luckyleoexpress-extra-extra-small-lucky-leos">XXS</a>
      <a href="https://www.luckyleodancewear.com/collections/luckyleoexpress-extra-extra-small-lucky-leos">XXS</a>
     </div>
  </div>
</div>

以上是关于Flex网格和背景图像并排响应/缩放问题的主要内容，如果未能解决你的问题，请参考以下文章

对齐双重包裹的嵌套 flex

如何使用 display:flex 进行正确且响应迅速的图像网格视图 [重复]

添加背景图像时，Xamarin android网格无法正确缩放单元格

音频处理Melodyne 网络缩放功能 ( 音符分离线 | 片段分离线 | 窗口滚动条 | 网格缩放 | 修改图像显示位置 | 显示五线谱 )

如何使用自动布局在情节提要上使网格并排 uiview 响应

如何在响应式方形网格中仅使背景图像透明？