解决了缩放时文本在图像上重叠的问题 [英] Fix a problem for text overlapping on Image while zooming

问题描述

在缩放页面时，TEXT与图像重叠，我正在共享我的屏幕截图，请仔细研究一下，您能给我解决方法吗? 在此先感谢...

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

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

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

这是HTML代码，在缩放页面时，TEXT与图片重叠，

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

推荐答案

您好，请尝试使用Sandeep并替换为您的CSS，并告诉我它是否可以.请根据您的需要调整最小和最大宽度和高度.

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 .

这篇关于解决了缩放时文本在图像上重叠的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！