缩放带有内容的背景图像 [英] Scaling background image with content on it

问题描述

我想要实现的目标是在标题中放大一个大头，缩小比例。我管理如何做到这一点。但我也想要它的内容 - 标志，菜单，一些信息。这些元素在网格框中。问题是图像缩小但不是内容。我想要一个主题以某种方式以相同的速度一起缩放。我想在不使用媒体查询的情况下执行此操作。这是可能的，或者这可能是一个不好的做法？下面是例子。我把边界放在了我的意思。我将高度设置为一个固定值，这就是为什么它不能正确缩放，但我必须设置它，否则它不会正确显示。

 < div class =wrapper> 
< div class =first> Lorem ipsum dolor< / div> 
< div class =second> consectetur adipiscing elit< / div> 
< div class =third> Vestibulum posuere vehicula massa vitae lacinia。 Etiam auctor posuere lectus，eget pharetra lorem porttitor at。 Etiam turpis arcu，iaculis et malesuada ac，porttitor ac quam。< / div> 
< / div> 
  

.wrapper {
background-color：rgb（254,254,254）;
max-width：1000px;
margin：0 auto;
background-image：url（'http://via.placeholder.com/1000x300'）;
height：300px;
background-size：包含;
背景重复：不重复;
z-index：-1;
display：grid;
grid-template-columns：repeat（5，1fr）;
grid-template-rows：repeat（3，1fr）;
}
.first {
grid-column：span 6;
grid-row：1;
border：1px纯黑色;
}
.second {
grid-column：span 6;
grid-row：2;
border：1px纯黑色;
}
.third {
grid-column：span 6;
grid-row：3;
border：1px纯黑色;
}


https://codepen.io/Eleuth/pen/vpEpMe

解决方案

<

不好的做法，因为在小设备上它将变得不可读。这是网络。虚拟空间。一切皆有可能。所以，如果你问了它，下面是我如何处理它：

• 向您的元素添加包装，使用位置：相对于。这个元素的主要目的是保持缩放元素之后的内容不会在缩放元素下渲染（因为您将为缩放元素使用 position：absolute ），这也是元素，您可以将 background-image 应用于某种形式。


• 给缩放元素 position：absolute; 并将其宽度更改为基本宽度（您希望其具有正常大小的宽度）。
  
• 计算基本宽度与父宽


• 使用 transform：scale（比例）
• 根据转换后的内容高度设置包装的高度。

以下是我正在谈论的内容：

function updateZoom（index，el）{l et zoomer = $（'zoom-content'，$（el）），baseWidth = zoomer.data（'base-width'），zoomFactor = $（el）.width（）/ baseWidth; zoomer.css（{width：baseWidth +'px'，transform：'scale（'+ zoomFactor +'）'}）; $（el）.height（zoomer.height（）* zoomFactor +'px'）;} $（window）.on（'load resize'，function（）{$（'zoom-wrapper'）。each（updateZoom） ;}）

/ *您的初始样式* /。wrapper {color：black; background-color：rgb（254,254,254）; max-width：1000px;保证金：0汽车; background-image：url（'http://via.placeholder.com/1000x300'）; height：300px; background-size：包含;背景重复：不重复; z-index：-1;显示：网格; grid-template-columns：repeat（5，1fr）; grid-template-rows：repeat（3，1fr）;}。first {grid-column：span 6;网格行：1; border：1px solid black;}。second {grid-column：span 6;网格行：2; border：1px solid black;}。third {grid-column：span 6;网格行：3; border：1px solid black;} / *必须有缩放工作所需的样式：* / zoom-wrapper，zoom-content {display：block; box-sizing：border-box;} zoom-wrapper {position：relative; overflow：hidden;} zoom-content {position：absolute;左：0; top：0; transform-origin：0 0;} / *化妆风格（仅适用于本示例）：* / zoom-wrapper :: before {position：absolute;左：0; top：0;底部：0;正确：0; background-color：rgba（0,0,0，.42）; z-index：1;指针事件：无; content：'';} zoom-content {color：white; z-index：1;}

< script src = https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script><zoom-wrapper style =background：url（https：// picsum.photos/1000/119）不重复50％50％/覆盖> < zoom-content data-base-width =1000> < div style =padding：0 1em> < H2>缩放。 [base-width：1000px]< / h2> < p为H. Lorem ipsum dolor amet清单托特包marfa六角形凸版，绿汁normcore pinterest。信托基金会酒吧六边形生物柴油，四美元吐司嘟嘟字面上。腌制stumptown truffaut，paleo DIY法兰绒工艺啤酒地铁瓷砖keffiyeh neutra mi< / p> < / DIV> < / zoom-content>< / zoom-wrapper>< h2>未缩放< / h2>< p> Artisan salvia场景8位90年代。 Brunch af 3狼月亮工匠。腌制服装布什威克道德，独角鲸migas不对称开衫鱿鱼合成器。 < / p>< zoom-wrapper style =background：url（https://dummyimage.com/650x137/000/fff）这是一款非常流行的视频剪辑软件，不重复50％50％/覆盖> < zoom-content data-base-width =650> < div style =padding：0 1em> < H2>缩放。 [base-width：650px]< / h2> < p> Artisan salvia场景8位90年代。 Brunch af 3狼月亮工匠。腌制服装布什威克道德，独角鲸migas不对称开衫鱿鱼合成器。 Kinfolk健康哥特式棱镜，taiyaki la croix道德VHS yr腹腔大师清洁etsy纹身meh扰乱。< / p> < / DIV> < / zoom-content>< / zoom-wrapper>< zoom-wrapper style =background：white;> < zoom-content data-base-width =1000> < div class =wrapper> < div class =first>这是yoru示例< / div> < div class =second> consectetur adipiscing elit< / div> < div class =third> Vestibulum posuere vehicula massa vitae lacinia。 Etiam auctor posuere lectus，eget pharetra lorem porttitor at。 Etiam turpis arcu，iaculis et malesuada ac，porttitor ac quam。< / div> < / DIV> < / zoom-content>< / zoom-wrapper>

如果您调整浏览器窗口大小，您会注意到放大的元素永远不会改变比例，从不换行。它们只是根据基本宽度和当前宽度之间的比例进行缩放。这意味着它们的比例尺就像 background-image 一样。

What I want to achieve is to put an image in the header, big one, that scales down. I managed how to do it. But also I want content on it - logo, menu, some information. Those elements are in grid boxes. The problem is that image is scaling down but not the content. I want a theme to somehow scale together at the same rate. I want to do it without using the media query. Is it possible or maybe it's a bad practice? Below is the example. I put borders to show what I mean. I set the height to a fixed value and that's why it's not scaling right but I had to set it otherwise it wouldn't display properly.

<div class="wrapper">
        <div class="first">Lorem ipsum dolor</div>
        <div class="second">consectetur adipiscing elit</div>
        <div class="third">Vestibulum posuere vehicula massa vitae lacinia. Etiam auctor posuere lectus, eget pharetra lorem porttitor at. Etiam turpis arcu, iaculis et malesuada ac, porttitor ac quam.</div>
</div>

.wrapper {
  background-color: rgb(254, 254, 254);
  max-width: 1000px;
  margin: 0 auto;
  background-image: url('http://via.placeholder.com/1000x300');
  height: 300px;
  background-size: contain;
  background-repeat: no-repeat;
  z-index: -1;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(3, 1fr);
}
.first {
  grid-column: span 6;
  grid-row: 1;
  border: 1px solid black;
}
.second {
  grid-column: span 6;
  grid-row: 2;
  border: 1px solid black;
}
.third {
  grid-column: span 6;
  grid-row: 3;
  border: 1px solid black;
}

https://codepen.io/Eleuth/pen/vpEpMe

解决方案

It's clearly bad practice, as on small devices it will become unreadable.

But, than again, this is web. Virtual space. Anything is possible. So, if you asked for it, here's how i'd tackle it:

• add a wrapper to your element, with position:relative. The main purpose of this element is to keep content after your zoomed element from rendering under the zoomed element (as you'll use position:absolute for the zoomed element. It's also the element you want to apply the background-image to, in one form or another.
• give zoomed element position:absolute; and change its width to the base width (the width where you want it to have normal size).
• calculate the ratio between base width and the parent width
• apply the ratio to the zoomed element using transform: scale(ratio)
• set wrapper's height according to transformed content height.

Here's what i'm talking about:

function updateZoom(index, el) {
  let zoomer = $('zoom-content', $(el)),
    baseWidth = zoomer.data('base-width'),
    zoomFactor = $(el).width() / baseWidth;
  zoomer.css({
    width: baseWidth + 'px',
    transform: 'scale(' + zoomFactor + ')'
  });
  $(el).height(zoomer.height() * zoomFactor + 'px');
}
$(window).on('load resize', function() {
  $('zoom-wrapper').each(updateZoom);
})

/* your initial styles */

.wrapper {
  color: black;
  background-color: rgb(254, 254, 254);
  max-width: 1000px;
  margin: 0 auto;
  background-image: url('http://via.placeholder.com/1000x300');
  height: 300px;
  background-size: contain;
  background-repeat: no-repeat;
  z-index: -1;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(3, 1fr);
}
.first {
  grid-column: span 6;
  grid-row: 1;
  border: 1px solid black;
}
.second {
  grid-column: span 6;
  grid-row: 2;
  border: 1px solid black;
}
.third {
  grid-column: span 6;
  grid-row: 3;
  border: 1px solid black;
}

/* must have styles required for zoom to work: */

zoom-wrapper, zoom-content {
  display: block;
  box-sizing: border-box;
}
zoom-wrapper {
  position: relative;
  overflow: hidden;
}

zoom-content {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
}

/* cosmetic styles (added only for this example): */

zoom-wrapper::before {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0,0,0,.42);
  z-index: 1;
  pointer-events: none;
  content: '';
}
zoom-content {
  color: white;
  z-index: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<zoom-wrapper style="background: url(https://picsum.photos/1000/119) no-repeat 50% 50% /cover">
  <zoom-content data-base-width="1000">
    <div style="padding: 0 1em">
      <h2>Zoomed. [base-width: 1000px]</h2>
      <p> Lorem ipsum dolor amet listicle tote bag marfa hexagon letterpress, green juice normcore pinterest. Trust fund gastropub hexagon biodiesel, four dollar toast mumblecore literally. Pickled stumptown truffaut, paleo DIY flannel craft beer subway tile keffiyeh neutra mi</p>
    </div>
  </zoom-content>
</zoom-wrapper>

<h2>Not zoomed</h2>
<p>Artisan salvia scenester 8-bit 90's. Brunch af 3 wolf moon artisan. Pickled sartorial bushwick poutine ethical, narwhal migas asymmetrical cardigan squid synth. Kinfolk health goth prism, taiyaki la croix ethical VHS yr celiac master cleanse etsy tattooed
  meh disrupt.</p>

<zoom-wrapper style="background: url(https://dummyimage.com/650x137/000/fff) no-repeat 50% 50% /cover">
  <zoom-content data-base-width="650">
    <div style="padding: 0 1em">
      <h2>Zoomed. [base-width: 650px]</h2>
      <p>Artisan salvia scenester 8-bit 90's. Brunch af 3 wolf moon artisan. Pickled sartorial bushwick poutine ethical, narwhal migas asymmetrical cardigan squid synth. Kinfolk health goth prism, taiyaki la croix ethical VHS yr celiac master cleanse etsy tattooed meh disrupt.</p>
    </div>
  </zoom-content>
</zoom-wrapper>

<zoom-wrapper style="background: white;">
  <zoom-content data-base-width="1000">
    <div class="wrapper">
        <div class="first">And this is yoru example</div>
        <div class="second">consectetur adipiscing elit</div>
        <div class="third">Vestibulum posuere vehicula massa vitae lacinia. Etiam auctor posuere lectus, eget pharetra lorem porttitor at. Etiam turpis arcu, iaculis et malesuada ac, porttitor ac quam.</div>
    </div>
  </zoom-content>
</zoom-wrapper>

If you resize the browser window you'll notice the zoomed elements never change proportion, never wrap differently. They just scale according to the ratio between base-width and current width. Which means they scale exactly like background-image does.

这篇关于缩放带有内容的背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！