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％。尝试将overflow:hidden设置在弹出窗口__left上（需要定义宽度和高度）。

如果它不起作用，请尝试将z-index:1设置为左侧，将z-index:0设置为右侧，因为该行位于popup__text（column-rule: 1px solid $color-gray-light-2）的边界。

Answer 2

我没有白线，请参阅打印屏幕。我在Windows上使用Chrome。所有游览都为我显示相同的图像。

弹出图像大小不同

2 个答案: