SVG становится отрезанным - PullRequest
Новая
       19

SVG становится отрезанным

0 голосов
/ 23 февраля 2019

Pic of Error Issue

svg, который у меня есть, находится внутри контейнера, который занимает нижние 40% страницы.Это связано с тем, что нижняя половина изображения нежелательна.Однако, как побочный эффект, svg обрезается рядом с текстом.Я пробовал overflow: visible;, но не сработало.Что еще я могу попробовать?Это код:

HTML (используется Bootstrap): 

    <header class="h-60 w-100 text-white hidden">
    <div class="container-fluid h-100 w-100">
        <div class="row h-100">
            <div class="container d-flex align-items-center justify-content-center w-100 h-100">
                <div class="col text-center w-100 heading">
                    <h1 class="reveal0">Ambrosia<h1>
                    <h3 class="reveal5">An Open-Source Website Theme</h3>
                    <br>
                    <a href="https://jaidevshriram.com" class="btn btn-light reveal15">See My Other Work!</a>
                </div>
            </div>
        </div>          
    </div>
</header>

<div class="container-fluid h-40">
    <div class="row h-100">
        <div class="container d-flex align-items-center justify-content-center h-100">
            <div class="col h-100 w-100 pic1">
            </div>
            <div class="col">
            </div>
        </div>
    </div>
</div>

CSS: 

    .hidden {
    overflow: hidden;
}

.pic1 {
    position: fixed;
    background: url("../img/pic1.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: cover;
    display: block;
    margin: auto;
    overflow: visible!important;
}

1 Ответ

0 голосов
/ 23 февраля 2019

вы можете использовать: 

background-size: contain

, чтобы уменьшить изображение, но не обрезать его.

Или использовать: 

background-position: top

, чтобывырезать низ вместо верха

...