修复缩放时文字重叠在图片上的问题
[英] Fix a problem for text overlapping on Image while zooming
本文介绍了修复缩放时文字重叠在图片上的问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在缩放页面文本与图像重叠时，我正在分享我的屏幕截图，请查看并提供解决方案.提前致谢...
这是css代码，缩放页面时TEXT与图片重叠，
.Pad{填充:60px 0px;边距顶部:-300px；}身体 {边距:0；}.outer-div-for-the-imgae-icon{position:relative;显示:块；高度:300px；宽度:300px；}.outer-div-for-the-imgae-icon img{height:300px;宽度:300px；适合对象:封面；}.outer-div-for-the-imgae-icon i{position:absolute;顶部:0；左:100%；字体大小:40px;}
这是 HTML 代码，在缩放页面时 TEXT 与图像重叠，
<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;位置:绝对；顶部:-5px；填充:3px；背景颜色:rgb(0, 195, 255);边框半径:50%；字体大小:12px；"class="fa fa-pencil fa-lg" aria-hidden="true"></i>
<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 class="col-sm"><span class="name"><p>{{myprofile?.Role}}</p></span>
<div class="col-sm"><span class="name"><p>{{myprofile?.Phone}} {{myprofile?.UserName}}</p></span>
<!-- 结束片段-->
解决方案
sandeep，请试试这个，并在你的 css 中替换这个 css，让我知道它是否好.请根据你调整最小和最大宽度和高度.
.outer-div-for-the-imgae-icon{position:relative;显示:块；最小高度: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%；字体大小:40px;}
我认为这只是因为我们给了图像一个固定的宽度和高度.
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 -->
解决方案
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屋！
