可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

While zooming the page TEXT is overlapping with the Image, I am sharing my screenshot, Please look into that and can you please give me the solution. Thanks in Advance...

This is the css Code, While zooming the page TEXT is overlapping with the Image,

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

This is the HTML code, While zooming the page TEXT is overlapping with the Image,

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

回答1:

Hi sandeep please try this and replace this css in you css and let me know if its fine.please adjust the min and max width and height according to you.

.outer-div-for-the-imgae-icon{position:relative; display:block; min-height:300px; width:100%; height:auto;} .outer-div-for-the-imgae-icon img{max-height:300px; width:100%; max-width:300px; height:auto; object-fit:cover;} .outer-div-for-the-imgae-icon i{position:absolute; top:0; left:100%; font-size:40px;}

I think this is overlapping only because we have given the image a fixed width and height .

回答2:

EDIT:

so i've changed the code a bit and this is what you will need:

<style>

.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:fixed; top:0; left:100%; font-size:40px;}

</style>

<html>
    <body>
        <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>
            <div id="over" >
                <img src="https://stepupandlive.files.wordpress.com/2014/09/3d-animated-frog-image.jpg"> some text
            </div>
            <div style="padding-left: 100px;" class="col-6 float-right">
                <div class="col-12 ">
                    <div class="office-address-heading">
                        <p class="Address">Office Address</p>
                    </div>
                    <div class="d-flex align-items-center">
                <!-- <i style="color:grey;" class="fa fa-map-marker fa-2x mr-2" aria-hidden="true"></i> -->
                <address class="mb-0 size">
                    {{myprofile?.OfficeAddress}}
                </address>
                    </div>
                </div>
                <hr />
                <div class="col-12">
                    <div class="office-address-heading">
                        <p class="Address">Communication Details</p>
                    </div>
                    <div class="d-flex align-items-center office-address-details ">
                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style ="right: 14px;">
                            <div class="col-xs-12 col-sm-12 col-md-5 col-lg-5 float-left">
                                <i class="fa fa-phone fa-2x mr-2" aria-hidden="true"></i>
                                <a style="color: black;" href="tel:1-562-867-5309">{{myprofile?.Phone}}</a>
                            </div>
                            <div class="d-flex1 col-xs-12 col-sm-12 col-md-8 col-lg-7 align-items-center office-address-details float-right ">
                                <i class="fa fa-envelope fa-2x mr-2" aria-hidden="true"></i>
                                <a style="color: black;" href="mailto:rafael.cepeda@lpl.com">{{myprofile?.Email}}</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

which you will get this result:

enter image description here

what i have changed is removing the css from the div that is responsible for the image, (bear in mind that i don't have the required files like photo's, links ect.... but this changed the image not overlapping the text.

reply if there is something wrong or if you have any questions