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

Question

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

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

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

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

.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>

Answer 1

而不是尝试将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>

如果你更喜欢jsFiddle，here it is。

注意：此答案不会尝试将background-image的缩放与<img>标记同步。它基于关于我如何处理这项任务的问题下面的评论。使用transforms可以实现上述两者的同步。 Here是如何实现它的一个例子。

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

问题描述投票：2回答：1

1个回答

最新问题

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

问题描述 投票：2回答：1

1个回答

最新问题

问题描述投票：2回答：1