Question

HTML

    <section class="section-about">
<div class="about">     
<figure class="about__shape">
<img src="https://images.unsplash.com/photo-1532012197267-da84d127e765?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=9c61d76abcdd6b0f7ef174e0da66a18d&auto=format&fit=crop&w=634&q=80" alt="" class="about__img">
<figcaption class="about__caption">Person's Name</figcaption>
</figure>  

<div class="about__desc">
<h1 class="u-margin-bottom-small heading-tertiary">About</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis officia architecto ea blanditiis dolor. Quas aliquid suscipit commodi possimus, tempore est odio alias aut fugiat aliquam perspiciatis ratione dolorem quaerat, odit esse hic ab quam ducimus? Quo repellendus consectetur dicta eligendi, rerum id laboriosam excepturi nam dolore voluptatibus consequuntur! Voluptatem quia possimus eius fuga adipisci, minima vero incidunt maxime vel! Labore similique, dolores impedit amet iusto incidunt accusantium nemo atque harum quas nesciunt ipsa fugit repellendus. Quos placeat obcaecati similique nulla ipsum quae reprehenderit, quaerat deserunt soluta in quis fugiat dicta. Iusto ducimus earum, id adipisci illo voluptatibus quidem commodi?</p>
</div>
</div>
</section>

CSS

.section-about {
    background-color: #f6f6f6;
    margin-top: -20vh;
    height: 65vh;
    padding: 20rem 5rem;
    transform: skewY(-6deg);


    & > * {
        transform: skewY(6deg);
    }
}

.about {
    display: flex;
    text-align: center;
    width: 100%;


    &__shape {
        width: 15rem;
        height: 15rem;
        transform: translateX(3rem);
        position: relative;
        overflow: hidden;
        border-radius: 50%;

        @supports (clip-path: polygon(0 0)) or (-webkit-clip-path: polygon(0 0)) {
            -webkit-clip-path: circle(50% at 50% 50%);
            clip-path: circle(50% at 50% 50%);
            -webkit-shape-outside: circle(50% at 50% 50%);
            shape-outside: circle(50% at 50% 50%);
            border-radius: none;
        }
    }

    &__img {
        height: 100%;
        width: 100%;
        transform: translateX(0) scale(1.4);
        backface-visibility: hidden;
        transition: all .5s;
    }

    &__caption {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, 20%);
        color: #fff;
        text-transform: uppercase;
        font-size: 1.7rem;
        text-align: center;
        opacity: 0;
        transition: all .5s;
        backface-visibility: hidden;
    }

    &:hover &__caption {
        opacity: 1;
        transform: translate(-50%, -50%);
    }

    &:hover &__img {
        transform: translateX(0) scale(1);
        filter: blur(3px) brightness(80%);
    }

    &__desc {
        align-self: center;
        margin-top: -4rem;
        margin-left: 15rem;
        width: 100%;
    }

}

我无法将图片变成一个完整的圆圈。我不知道使用flexbox作为布局或填充是否与我有关。我尝试对其进行修复，然后将其放在空白页中，调整了图像的宽度和转换代码，并且可以正常工作，但是当我将其放入原始项目时，图像不会变成一个完整的圆圈。这是我的Codepen中确切问题的链接： https://codepen.io/QuizonM/pen/ZjLOQJ

Answer 1

您的Webkit剪辑路径是造成此问题的原因

https://imgur.com/a/BbMKhfg

不确定是否需要该剪辑。

如果您想围成一个完整的圆圈，请删除您的溢出对象：隐藏在＆__ shape中，您将获得this。

已清除溢出：隐藏；

&__shape {
    width: 15rem;
    height: 15rem;
    transform: translateX(3rem);
    position: relative;
    border-radius: 50%;

    @supports (clip-path: polygon(0 0)) or (-webkit-clip-path: polygon(0 0)) {
        -webkit-clip-path: circle(50% at 50% 50%);
        clip-path: circle(50% at 50% 50%);
        -webkit-shape-outside: circle(50% at 50% 50%);
        shape-outside: circle(50% at 50% 50%);
        border-radius: none;
    }
}

如果您想要椭圆形，请删除@supports及其后面的所有内容，以获取this

删除了@supports和剪辑的其余部分：

&__shape {
    width: 15rem;
    height: 15rem;
    transform: translateX(3rem);
    position: relative;
    overflow:hidden;
    border-radius: 50%;
}

希望这会有所帮助，这正是您想要的。

Answer 2

在您的情况下，您不需要边框半径，因为图像不是正方形。您需要调整图像的高度和宽度并删除半径。使用下面的CSS应该给出一个想法。

改变高度的宽度略小于宽度的一半。

 .about__shape {
    width: 16rem;
    height: 7.6rem;
    transform: translateX(3rem);
    position: relative;
    overflow: hidden;
    /* border-radius: 75%; */
}

如何将我的图像变成一个完整的圆圈？

2 个答案: