Question

我将使用图像更好地问我一个问题。我有2个图像，底部的箭头和正方形的图像。现在，this is my page when the screen is fully maximized。 This is when my page is resized。我要实现的是使箭头具有可伸缩性，这意味着在页面最小化，正方形图像调整大小，箭头调整大小后，外观与最大化页面相同。

  .bgPic{
     position: absolute;
     background-position: center;
     object-fit: contain;
     display: inline;
    }
    .background{
    max-width: 50%;
    max-height: 100%; 
    }
    #resize{
    width: 100px;
    height: 100px;
    position: absolute;
    top: 80%;
    right: 27%;
    max-width: 10%;
    }

<div class="background">
        <img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" alt="image" class="bgPic" width="100%" height="100%" />
        <img src="http://pluspng.com/img-png/arrow-png-no-background-download-this-image-as-600.png" id="resize" alt="" width="100%" height="auto%" >
    </div>

Answer 1

我怀疑您需要您的主图像始终保持完全可见。然后，您可以通过删除一些代码并仅添加相对于具有类背景的包装div的CSS位置来解决此问题。这一点很重要，因为这是您可以将箭头定位（绝对）到的父对象。

FYI 1：我也将箭头的位置更改为底部和右侧。

FYI 2：我将箭头的大小更改为百分比，以便在调整浏览器大小时可以缩放（如果不需要，则可以使用像素值）。

HTML

<div class="background">
    <img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" alt="image" class="bgPic" width="100%" height="100%" />
    <img src="http://pluspng.com/img-png/arrow-png-no-background-download-this-image-as-600.png" class="resize" alt="" width="100%" height="auto%" >
</div>

CSS

.background {
    position: relative;
}

.resize {
    width: 10%;
    height: 10%;

    position: absolute;
    bottom: 5%;
    right: 5%;
}

有关示例，请参见https://jsfiddle.net/4mpq10ne/8/

如何使我的图像重叠在另一个响应图像上

1 个答案: