Question

我想要实现的是将图像放在标题中，大图像缩小。我设法怎么做。但我也想要内容 - 徽标，菜单，一些信息。这些元素位于网格框中。问题是图像缩小而不是内容。我想要一个主题以某种方式以相同的速度缩放。我想在不使用媒体查询的情况下这样做。有可能或者这可能是一种不好的做法吗？以下是示例。我把边框显示出我的意思。我将高度设置为固定值，这就是为什么它不能正确缩放，但我必须设置它，否则它将无法正确显示。

<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

Answer 1

显然不良做法，因为在小型设备上它会变得不可读。

但是，再次，这是网络。虚拟空间。一切皆有可能。所以，如果你要求它，这就是我要解决的问题：

使用position:relative为您的元素添加包装器。此元素的主要目的是在缩放元素下保持缩放元素后的内容（因为您将position:absolute用于缩放元素。它也是您要应用background-image的元素以某种形式出现。
给出缩放元素position:absolute;并将其宽度更改为基本宽度（您希望它具有正常大小的宽度）。
计算基本宽度与父宽度之间的比率
使用transform: scale(ratio)
根据转换后的内容高度设置包装器的高度。

这就是我所说的：

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>

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

缩放带有内容的背景图片

1 个答案: