Question

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

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

.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与图片重叠，

<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

您好，请尝试将其替换为您的CSS，让我知道它的效果如何。请根据您的需要调整最小和最大宽度和高度。

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

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

Answer 2

编辑：

所以我对代码进行了一些更改，这就是您需要的：

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

您将获得以下结果：

enter image description here

我已更改的是从负责图像的div中删除css（（请记住，我没有所需的文件，例如照片，链接等）。但这改变了图像，但没有重叠文字。

如果有问题或有任何疑问，请回复

解决了缩放时图像上文字重叠的问题

2 个答案: