我有一个包含(duh)1个图像和1个div的容器。
图像是一个带有水平透明线的地图。
我希望div按照PHP中定义的百分比水平地从右到左填充图像。
这是我的代码:

<div class="canada-wrapper">
    <div class="percentage" style="width:<?php the_field('percentage') ?>%;"></div>
    <img src="<?php the_field('canada_img'); ?>" alt="">
</div>

我试过这个CSS:(我是从一个图片前面的div示例中得到的,这与我想要的正好相反,而且我没有完整的ditdh div,与示例不同)
.canada-wrapper {
  img {
    margin:auto;
    position: relative;
  }
  .percentage {
    background-color: orange;
    height: 60em;
    position: absolute;
    left: 50%;
    margin-left:30%;
  }
}

它还没有安静的工作,它有点,但即使它有,它根本没有反应,因为左,高度和边距属性的div.这是我能得到的最接近的。
我试着寻找类似的问题,但它们从不涉及百分比定义的div,这会改变一切。
这就是我想要的样子:html - 如何将百分比定义的宽度div放在响应图像后面而不会溢出-LMLPHP

最佳答案

我认为这是你所要求的,但是如果需要的话,我愿意和你一起改进。(没有sass,所以我可以做一个代码片段。)

body {
  height: 100%;
}

.canada-wrapper img {
  margin: auto;
  position: relative;
}

.canada-wrapper .percentage {
  position: absolute;
  right: 0;
  top: 0;
  width: 0;
  height: 100%;
  background-color: #f00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="canada-wrapper">
  <div class="percentage" style="width: 50%;"></div>
  <img src="http://placehold.it/350x150" style="width: 100%">
</div>

这个例子有点尴尬,因为没有php更改百分比,但您应该看到图像现在可以随着屏幕大小适当缩放。在展开/全屏中查看示例-堆栈溢出有一个最小宽度,在这个小窗体中看不到它。

关于html - 如何将百分比定义的宽度div放在响应图像后面而不会溢出,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/42239564/

10-12 12:50
查看更多