css - 图像在缩放时未与 div 对齐

Question

我试图将居中的图片附加到它后面的黑色 div，但是如果你把窗口变小(窗口宽度变小)，黑色的 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>

Answer 1

我可以这样建议吗:

.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>