html - 弹出图像不同尺寸

Question

我正在处理这个弹出部分。在较大的屏幕上，左侧会堆叠 2 个图像。当屏幕较小(平板电脑/手机)时，它们并排放置。

我找不到这里有什么问题，但我的图像尺寸不同。在大屏幕上，我注意到左侧有一条 1px 的白线。在较小的屏幕上，它在顶部关闭。

我注意到图片的尺寸略有不同。我回过头检查我的代码，看看是否能注意到添加这个额外空白的任何内容，但除了不同的照片比例 (2000X1333px) 和 (2000X1376px) 之外，我什么都看不到...

我正在关注一个视频，但人物图像似乎大小相同？

附上照片和代码，非常感谢! Large screen Small Screen Codepen Link for extra CSS/HTML它可能有助于清晰度，尽管它没有视觉问题的图像。

            <div class="popup__left">
                <img src="img/nat-8.jpg" alt="Tour Photo" class="popup__img">
                <img src="img/nat-9.jpg" alt="Tour Photo" class="popup__img">
            </div>
            <div class="popup__right">
                <a href="#section-tours" class="popup__close">&times;</a>
                <h2 class="heading-secondary">Start booking now</h2>
                <h3 class="heading-tertiary">Important &ndash; Please read the terms and conditions first</h3>

                <p class="popup__text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cum molestias recusandae id consequuntur odio alias dolores culpa reiciendis hic incidunt eos ipsa qui, doloribus consequatur voluptas enim obcaecati laborum mollitia aperiam ut. Molestias dicta, ipsa iusto esse commodi neque unde ipsam dolor quasi? Expedita, earum nemo? Soluta aspernatur nulla, doloremque harum, corrupti unde adipisci id officiis repudiandae vel, odio mollitia. Ab esse placeat quod earum aliquid iure! Ipsum assumenda, recusandae quia perspiciatis maiores quos sunt? Molestiae unde deleniti id repudiandae porro et, incidunt explicabo, similique quibusdam voluptatum a, sunt impedit?</p>

                <a href="#" class="btn btn--green">Book now!</a>
            </div>
        </div>
    </div>

.popup {
height: 100vh;
width: 100%;
position: fixed;
top: 0;
left: 0;
background-color: rgba($color-black, .8);
z-index: 9999;
visibility: hidden;
opacity: 0;
transition: all .3s;

&__content {
    @include absCenter;
    width: 75%;
    background-color: $color-white;
    box-shadow: 0 2rem 4rem rgba($color-black, .2);
    border-radius: 3px;
    display: table;
    overflow: hidden;
    opacity: 0;
    transform: translate(-50%, -50%) scale(.25);
    transition: all .4s .2s;
}

&__img {
    display: block;
    width: 100%;

    @include respond(tab-port) {
        display: inline-block;
        width: 49%;
    }
}

&__left {
    width: 33.333333%;
    display: table-cell;

    @include respond(tab-port) {
        display: block;
        width: 100%;
        padding: 3rem 5rem 0rem 5rem;
    }
}

&__right {
    width: 66.666667%;
    padding: 3rem 5rem;
    display: table-cell;
    vertical-align: middle;

    @include respond(tab-port) {
        display: block;
        width: 100%;
    }
}

&__text {
    font-size: 1.4rem;
    margin-bottom: 4rem;

    -moz-column-count: 2;
    -moz-column-gap: 4rem;
    -moz-column-rule: 1px solid $color-gray-light-2;

    column-count: 2;
    column-gap: 4rem;
    column-rule: 1px solid $color-gray-light-2;

    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;

    @include respond(tab-port) {
        -moz-column-count: 1;
        column-count: 1;
    }
}

//Popup open state
&:target {
    visibility: visible;
    opacity: 1;
}

&:target &__content {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

&__close {
    &:visited,
    &:link {
        color: $color-gray-dark;
        position: absolute;
        top: 2.5rem;
        right: 2.5rem;
        font-size: 3rem;
        text-decoration: none;
        display: inline-block;
        transition: all .3s;
        line-height: 1;
    }
    &:hover {
        color: $color-primary;
    }
}

Answer 1

您正在使用 popup__left width=33.33% 和 popup__img width=100% 并且 100% 的图像大于屏幕的 33%。尝试在 popup__left 上设置 overflow:hidden(需要定义宽度和高度)。

如果不起作用，请尝试将 z-index:1 设置为左​​侧，将 z-index:0 设置为右侧，因为该线来自边界popup__text (column-rule: 1px solid $color-gray-light-2).