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

【问题标题】：Flex grid <img> and background-image side by side responsiveness/scaling issueFlex 网格 <img> 和背景图像并排响应/缩放问题
【发布时间】：2018-06-06 00:33:15
【问题描述】：

这是我的问题：我正在尝试创建一个并排广告，其中左侧只是一张图片，右侧是一张背景图片，上面嵌套了图片、文本和 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-size:cover 为整个div 制作单个背景图像，将您的内容放在右半部分，使用纯白色border-left 并使用@media 查询整个元素的height 来控制背景比例。根据所需的支持级别，您可以在该事物上使用 display:flex 或 display:table。
嘿，这真的很聪明。我的下一个行动计划是尝试一个带有背景图像的整个 div，但我从未想过左边框的事情。真的很酷。如何将内容放在右半部分？使用 % 填充？
我将提供一个示意图。
我很感激
@LanceWalker 如果下面的回答对你有帮助，请点赞！

标签： html css image responsive-design flexbox

【解决方案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> 标签同步。它基于关于我将如何处理此任务的问题下面的 cmets。使用transforms 可以实现上述两者的同步。 Here 是一个如何实现它的示例。

【讨论】：

你是救生员。谢谢！