0

Такая вот проблема, необходимо, чтобы картинки отображались горизонтально и их width был равен div images, а также была возможность их скролить. Но сейчас они отображаются сжимаясь и если добавить 10 изображений, то получается непонятно, что.

.images {
    height:200px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    overflow-x: scroll;
    align-items: left;
}

.images .image {
    width: 100%;
    text-align: center;
    position: relative;
}

.images .img {
    margin: 0 2px;
    background-position: 50%;
    background-size: cover;
    height: 200px;
    width: 100%;
    position: relative;
}
<div class="images">
                    <div class="image">
                        <div class="img" style="background-image: url('https://sun1-87.userapi.com/c204816/v204816508/261ed/fwxp6D6bZf8.jpg?ava=1');"></div>
                    </div>
                    <div class="image">
                        <div class="img" style="background-image: url('https://sun1-87.userapi.com/c204816/v204816508/261ed/fwxp6D6bZf8.jpg?ava=1');"></div>
                    </div>
                    <div class="image">
                        <div class="img" style="background-image: url('https://sun1-87.userapi.com/c204816/v204816508/261ed/fwxp6D6bZf8.jpg?ava=1');"></div>
                    </div>
                    <div class="image">
                        <div class="img" style="background-image: url('https://sun1-87.userapi.com/c204816/v204816508/261ed/fwxp6D6bZf8.jpg?ava=1');"></div>
                    </div>
                    <div class="image">
                        <div class="img" style="background-image: url('https://sun1-87.userapi.com/c204816/v204816508/261ed/fwxp6D6bZf8.jpg?ava=1');"></div>
                    </div>
                    <div class="image">
                        <div class="img" style="background-image: url('https://sun1-87.userapi.com/c204816/v204816508/261ed/fwxp6D6bZf8.jpg?ava=1');"></div>
                    </div>
                                            <div class="image">
                            <div class="img" style="background-image: url('https://sun1-87.userapi.com/c204816/v204816508/261ed/fwxp6D6bZf8.jpg?ava=1');"></div>
                        </div>
                                                <div class="image">
                            <div class="img" style="background-image: url('https://sun1-87.userapi.com/c204816/v204816508/261ed/fwxp6D6bZf8.jpg?ava=1');"></div>
                        </div>
                                                <div class="image">
                            <div class="img" style="background-image: url('https://sun1-87.userapi.com/c204816/v204816508/261ed/fwxp6D6bZf8.jpg?ava=1');"></div>
                        </div>
                                                <div class="image">
                            <div class="img" style="background-image: url('https://sun1-87.userapi.com/c204816/v204816508/261ed/fwxp6D6bZf8.jpg?ava=1');"></div>
                        </div>
                </div>

0

1 ответ 1

1

.images .image { min-width: 100%; }

2
  • 1
    Большое спасибо! :)
    – FILVIN4
    Commented 11 янв. 2020 в 8:05
  • @Filvin, не за что, желаю успехов!
    – meine
    Commented 11 янв. 2020 в 8:05

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.