html - Flex grid <img> 和 background-image 并排响应/缩放问题

标签 html css image responsive-design flexbox

这是我的问题: 我正在尝试创建一个并排广告，其中左侧只是一张图片，右侧是一张背景图片，上面嵌有图片、文本和 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(/image/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>标签。它基于关于我将如何处理此任务的问题下方的评论。可以使用 transform 实现以上两者的同步秒。 Here是如何实现它的示例。

关于html - Flex grid <img> 和 background-image 并排响应/缩放问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47957017/

上一篇：javascript - 我怎么能用javascript写这个短函数？

下一篇：PHP遍历DOM并获取属性和文本

相关文章：

html - 在具有渐变背景的元素上应用透明边框时出现奇怪的效果

ios - 需要有关通过API访问的图片托管的建议

java - Struts 2显示图像

php - 解析由 html 表单发布的 php 中的数组

css - 帮助正确设置 CSS 格式

javascript - 更新列表项的类 - jQuery

css - div 可以延伸到滚动框之外吗？

html - 在表格和宽度中格式化图像的困难

javascript - 将复选框中的值放入 html 输入字段

javascript - 根据下拉列表动态替换 'src' 和 'href' 标签

©2024 IT工具网  联系我们