使用绝对的图像上的响应定位图标

Question

我正在尝试在图像顶部放置字体真棒图标，如果图像保持在一个位置，它会起作用，但由于屏幕尺寸，图像可能会向下和向下移动而没有图标

例如

第一种情况它工作正常

第二种情况一个图像在放大时向下移动但图标没有

第三种情况所有图像都在彼此之下移动，但图标不是

HTML代码

<span class="images_wrapper">
    <i class="fa fa-times-circle-o delete_image delete_image"></i>
    <img src="https://ae01.alicdn.com/kf/UTB8ROsoXwnJXKJkSaelq6xUzXXab.jpg">
</span>

Css

.images_wrapper {
    position: relative;
}

.images_wrapper i {
    position: absolute;
    color: red;
}

如何使图标随图像一起移动？

https://jsfiddle.net/1vzd5ofv/1/

尝试尽可能地缩放，直到图像向下移动

感谢。

Answer 1

您必须使用left和top作为图标。

.images_wrapper {
    position: relative;
    width: 300px;
    display: inline-block;
}
img {
max-width: 100%;
height: auto;
}

.images_wrapper i {
    position: absolute;
    color: red;
    left: 0;
    top: 0;
}

<span class="images_wrapper">
    <i>X</i>
    <img src="https://ae01.alicdn.com/kf/UTB8ROsoXwnJXKJkSaelq6xUzXXab.jpg">
</span>

<span class="images_wrapper">
    <i>X</i>
    <img src="https://ae01.alicdn.com/kf/UTB8ROsoXwnJXKJkSaelq6xUzXXab.jpg">
</span>

<span class="images_wrapper">
    <i>X</i>
    <img src="https://ae01.alicdn.com/kf/UTB8ROsoXwnJXKJkSaelq6xUzXXab.jpg">
</span>