图像缩放比例不符合div

博格丹2305

我正在尝试将居中图片附加到它后面的黑色div上,但是如果您将窗口缩小(窗口宽度较小),则黑色div会变小,并且在图片的左上角和右上角与黑区 它不会在div附近保持固定。

我该如何解决?谢谢你。请以整页形式查看,然后以小页形式查看。在此处查看示例:

.f-content {
    margin-top: 5%;
    text-align: center;
    display: inline-block;
    width: 100%;
    background-color: #1C2431;
}
<div class="f-content">
<div style="float: left; color:white;">FOOTER LEFT</div>
<img src="http://curier.cumparamlaptopuri.ro/1.png" alt="" width="40%" height="auto" style="margin-top: -26px; position: inherit;" />
<div style="float: right;color:white;">FOOTER RIGHT</div>
<div style="clear: right;"></div>
</div>

麦克风

我可以建议这样的事情吗:

.f-content {
    margin-top: 5%;
    text-align: center;
    display: inline-block;
    width: 100%;
    background-color: #1C2431;
    position: relative;
}

img {
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  margin-top: -1.9%;
}
<div class="f-content">
<div style="float: left; color:white;">FOOTER LEFT</div>
<img src="http://curier.cumparamlaptopuri.ro/1.png" alt="" width="40%" height="auto">
<div style="float: right;color:white;">FOOTER RIGHT</div>
<div style="clear: right;"></div>
</div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章