我有一个包含(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,这会改变一切。
这就是我想要的样子:
最佳答案
我认为这是你所要求的,但是如果需要的话,我愿意和你一起改进。(没有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/