如何在div右下角放置图片并实现PC端与移动端的响应式适配

修复方案 #

你当前代码的核心问题是绝对定位的基准容器配置错误，以下是可实现响应式右下角图标的完整修改代码：

<style>
    .tdlr{
        background-image: url('img/TLDRback.png');
        border-radius: 15px;
        padding-top: 150px;
        margin-top: 100px;
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        /* 固定高度改为最小高度，适配不同屏幕的内容展示需求 */
        min-height: 450px;
        /* 添加相对定位，作为子元素绝对定位的基准 */
        position: relative;
    }

    .btmRght {
        /* 响应式尺寸：最大宽度70px，移动端自动缩小 */
        max-width: 70px;
        width: 10vw;
        /* 保持宽高比1:1，避免图标变形 */
        aspect-ratio: 1/1;
        position: absolute;
        /* 不需要图标超出容器可改为 right: 10px，保留溢出效果保持原有-10px即可 */
        right: -10px;
        bottom: 0;
    }

    /* 小屏精细适配可选配置 */
    @media (max-width: 768px) {
        .tdlr {
            min-height: 350px;
            padding-top: 100px;
        }
        .btmRght {
            right: -5px;
        }
    }
</style>

<section class="container-fluid text-center">
    <div class="tdlr"> 
        <img class="btmRght" src="img/TLDRbottomright.jpg" alt="右下角图标">
    </div>
</section>

内容的提问来源于stack exchange，提问作者Toxicwaves