Исправлена ​​проблема с наложением текста на изображение при масштабировании - PullRequest
Новая
       3

Исправлена ​​проблема с наложением текста на изображение при масштабировании

0 голосов
/ 18 декабря 2018

Несмотря на то, что при масштабировании страницы текст пересекается с изображением, я делюсь своим снимком экрана, пожалуйста, посмотрите на него и не могли бы вы дать мне решение.Заранее спасибо ... image

Это код 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 -->

Ответы [ 2 ]

0 голосов
/ 19 декабря 2018

Привет, Сандип, пожалуйста, попробуйте это и замените этот CSS в вашем 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;}

Я думаю, что это перекрывается только потому, что мы дали изображению фиксированную ширину и высоту.

0 голосов
/ 18 декабря 2018

РЕДАКТИРОВАТЬ:

, поэтому я немного изменил код, и это то, что вам нужно: 

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

, который вы получите этот результат:

введите описание изображения здесь

что я изменил, так это удаление css из div, отвечающего за изображение (имейте в виду, что у меня нет необходимых файлов, таких как фотографии,ссылки т. д .... но это изменило изображение, не перекрывая текст.

ответьте, если что-то не так или если у вас есть какие-либо вопросы

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...