Question

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

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

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

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

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

DESIRED RESULT

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

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

＆＃13;

min-height

＆＃13;

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;
  }
}

＆＃13;

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

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

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

1 个答案: