html - 修复缩放时文本在图像上重叠的问题

Question

当缩放页面时文本与图像重叠，我正在分享我的屏幕截图，请查看并给我解决方案。提前致谢...

这是css代码，在缩放页面时文本与图像重叠，

.Pad{
    padding: 60px 0px;
    margin-top: -300px;
 }

 body {
    margin: 0;
}

.outer-div-for-the-imgae-icon{position:relative; display:block; height:300px; width:300px;   }

.outer-div-for-the-imgae-icon img{height:300px; width:300px; object-fit:cover;}

.outer-div-for-the-imgae-icon i{position:absolute; top:0; left:100%; font-size:40px;}

这是 HTML 代码，在缩放页面时文本与图像重叠，

<div class="col-12 col-12 p-0">
                        <div class="col-6 float-left">
                            <div class="outer-div-for-the-imgae-icon">
                                <app-image [imagesrc]="imagePath" style="width: 190px;max-height: 190px;clip-path: square(25px at center);"
                                    class="d-none d-sm-block" alt="..."></app-image>
                                <i (click)="inputFile.click()" style="color : white;left: 180px; 
                                position: absolute; top: -5px; padding: 3px; background-color: rgb(0, 195, 255); 
                                border-radius: 50%;font-size: 12px;"
                                    class="fa fa-pencil fa-lg" aria-hidden="true"></i>
                            </div>

                            <div class="col-6 Pad float-right">
                                <div class="col-sm ">

                                    <span class="name">
                                        <b style="color: rgb(25,25,112); font-size : 15px ">{{myprofile?.FirstName}}
                                            {{myprofile?.LastName}}</b>
                                    </span>
                                </div>

                                <div class="col-sm">

                                    <span class="name">
                                        <p>{{myprofile?.Role}}</p>
                                    </span>
                                </div>

                                <div class="col-sm">

                                    <span class="name">
                                        <p>{{myprofile?.Phone}} {{myprofile?.UserName}}</p>
                                    </span>
                                </div>
                            </div>
                        </div>





        <!-- end snippet -->

Answer 1

你好 sandeep，请试试这个并在你的 css 中替换这个 css，让我知道它是否正常。请根据你的情况调整最小和最大宽度和高度。

.outer-div-for-the-imgae-icon{position:relative;显示: block ；最小高度:300px；宽度:100%；高度:自动；} .outer-div-for-the-imgae-icon img{max-height:300px;宽度:100%；最大宽度:300px；高度:自动； object-fit:cover;} .outer-div-for-the-imgae-icon i{position:absolute;顶部:0；左:100%； font-size:40px;}

我认为这是重叠的，只是因为我们给图像设置了固定的宽度和高度。