2褐色DIV：

Question

我尝试将2个滑块（猫头鹰旋转木马）固定在背景图像上的特定点上。

定位不是大问题，这是由jQuery完成的，正如下面的代码所示。

问题是，当我更改浏览器的宽度时，仅调整垂直大小，或仅调整水平大小，它只会更改宽度或高度。但是由于背景图像的改变背景尺寸：盖

照片：

1 = DIV with slider
2 = part of background-image
3 = DIV with slider

HTML ＃1 div的代码：

<div id="slider-team" class="owl-carousel owl-theme">
 <div class="team-item">
  <div class="team-box">
   <div class="team-photo image-works">
    <img alt="Team" class="img-correction lazy" src="img/team/team-01.png">
   </div>
  </div>
 </div>
</div>

2褐色DIV：

<div class="slider-team-vis">
 <div class="vis-item">
  <p class="vis-name">Forname<br> Name</p>
  <p class="vis-titel">titel</p>
  <p class="vis-email">info@email.com</p>
  <p class="vis-adress">T.XXX.XX XX XX XX<br> info@email.com <br> www.internet.de</p>
 </div>
</div>

CSS DIV＃1

#slider-team {
        width:18.1%;
        padding-bottom:25%;
            }

图像由猫头鹰滑块计算，效果很好。这里的问题是宽度（和高度），它有问题，如前所述。

DIV＃2 brown

.slider-team-vis {
width: 11% !important;
transform: rotate(-3.5deg);
padding-right: 2%;
position:absolute !important;
}
.vis-name {
text-transform: uppercase;
text-align: right;
color: #ccc;
font-size: 3vh;
font-weight: 800;
margin-bottom: 0;
line-height: 2.3vh;
letter-spacing: -1px;
padding-right: 2%;
}

标题，电子邮件和地址就像.vis-name，只有较小的字体大小，因此我不会在这里发布。节省一些空间。

背景图片：

#page-team-1 {
        overflow:hidden;
        background-image:url(../img/sections/team5.jpg);
        background-position: center center;
        background-repeat:  no-repeat;
        background-attachment: fixed;
        background-size:  cover;
        background-color: #34393b;
        }

因此，映射工作完美，我不需要在这里放置jQuery代码。我试图保持div与padding-bottom的比例百分比，但由于绝对定位，这似乎不应该像它应该的那样。使用vh或vw并没有让我得到想要的结果。

现在，我对此问题感到头疼。也许有人有另一个想法，如何解决这个困境......？

提前感谢任何想法....对于长文本感到抱歉......

Answer 1

嗯，对于头痛，你可以使用阿司匹林。对我来说很好。

对于具有固定比率的尺寸，您可以使用零高度填充方法。我刚刚想出了那个名字，所以不要试着谷歌吧。

无论如何，它利用了一个事实，即底部/顶部填充百分比是相对于元素的 width 而不是高度，正如您所期望的那样。来自MDN：

百分比是指包含块的宽度

这意味着元素的最终高度将始终相对于元素的宽度。当你在该元素中放入另一个元素并将其置于绝对位置时，它将与填充区域重叠，否则该区域将为空。

示例：

＆＃13;

.parent {
  background: yellow;
  padding: 300px 0 100px;
  width: 50%;
}

.sizing-element {
  background: red;
  padding-bottom: 56.25%; /* 16:9 ratio */
  position: relative; /* important! Otherwise the content-element will not hold to this boundaries */
  width: 100%;
}

.content-element {
  border: 2px solid blue;
  box-sizing: border-box;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

＆＃13;

<div class="parent">
  <div class="sizing-element">
    <div class="content-element">
      <h2>Content here</h2>
      <p>But be advised; the element will not grow/shrink based on the content</p>
    </div>
  </div>
</div>

＆＃13;

尝试此示例并调整浏览器大小以查看其工作原理。我想通过一些改动，你可以根据你的特定用例使用它。

将元素固定到背景图像上的元素（响应）

2褐色DIV：

1 个答案: