Всплывающие картинки разных размеров

Question

Я работаю в этом всплывающем разделе.На больших экранах слева располагаются 2 изображения.Когда экран меньше (планшет / телефон), они располагаются рядом.

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

Я заметил, что картинки немного отличаются по размеру.Я вернулся к своему коду, чтобы увидеть, могу ли я заметить что-то, что добавляет этот дополнительный пробел, но я не вижу ничего, кроме различных соотношений фотографий (2000X1333px) и (2000X1376px) ...

Я просматриваю видео, и изображения людей, кажется, имеют одинаковый размер?

Фотографии и код прилагается, помощь очень ценится! Большой экран Маленький экран Ссылка Codepen для дополнительного 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

Для меня нет белой линии, см. Экран печати.Я использую хром на Windows.Все туры показывают одни и те же изображения для меня.

Answer 2

Вы используете popup__left width=33.33% и popup__img width=100%, и 100% изображения больше, чем 33% вашего экрана.Попробуйте установить overflow:hidden в popup__left (необходимо указать ширину и высоту).

Если это не сработает, попробуйте установить z-index:1 влево и z-index:0 вправо, потому что эта строкаот границы popup__text (column-rule: 1px solid $color-gray-light-2).