Как уменьшить размер магазина?

152

25 января 2020, 06:40

Можете подсказать какие параметры изменить чтобы сделать размер этого магазина таким width: 196rem; height: 168rem; ? Пытался менять различные параметры, но целиком он не уменьшается.

Полный код на codepen.io

Полный код в вопрос не смог вставить, т.к. 61к, а максимум на стек 30к

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link href='https://fonts.googleapis.com/css?family=Roboto:900' rel='stylesheet' type='text/css'>
</head>
<body>
    <div class="main">
        <div class="cloud-box">
            <div class="cloud cloud-x1"></div>
            <div class="cloud cloud-x2"></div>
            <div class="cloud cloud-x3"></div>
            <div class="cloud cloud-x4"></div>
            <div class="cloud cloud-x5"></div>
            <div class="cloud cloud-x6"></div>
        </div>
        <div class="flag">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div class="roof">
            <div></div>
            <div></div>
        </div>
        <div class="second_floor">
            <div class="second_floor-first">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="second_floor-window">
                <div>
                    <div class="frame"></div>
                    <div class="windows">
                        <div class="window">
                            <div class="Shutters-curtain"></div>
                            <div class="Shutters-top"></div>
                            <div class="Shutters-left"></div>
                            <div class="Shutters-right"></div>
                            <div class="Shutters-bottom"></div>
                            <div class="curtain-top-left">
                                <div class="curtain-top-left--x2"></div>
                            </div>
                            <div class="curtain-top-right">
                                <div class="curtain-top-right--x2"></div>
                            </div>
                            <div class="tape-left"></div>
                            <div class="tape-right"></div>
                            <div class="curtain-bottem-left">
                                <div class="curtain-bottem-left--x2"></div>
                            </div>
                            <div class="curtain-bottem-right">
                                <div class="curtain-bottem-right--x2"></div>
                            </div>
                        </div>
                    </div>
                    <div class="windowsill"></div>
                    <div class="windowsill-top"></div>
                </div>
                <div>
                    <div class="frame"></div>
                    <div class="windows">
                        <div class="window">
                            <div class="Shutters-curtain"></div>
                            <div class="Shutters-top"></div>
                            <div class="Shutters-left"></div>
                            <div class="Shutters-right"></div>
                            <div class="Shutters-bottom"></div>
                            <div class="curtain-top-left">
                                <div class="curtain-top-left--x2"></div>
                            </div>
                            <div class="curtain-top-right">
                                <div class="curtain-top-right--x2"></div>
                            </div>
                            <div class="tape-left"></div>
                            <div class="tape-right"></div>
                            <div class="curtain-bottem-left">
                                <div class="curtain-bottem-left--x2"></div>
                            </div>
                            <div class="curtain-bottem-right">
                                <div class="curtain-bottem-right--x2"></div>
                            </div>
                        </div>
                    </div>
                    <div class="windowsill"></div>
                    <div class="windowsill-top"></div>
                </div>
                <div>
                    <div class="frame"></div>
                    <div class="windows">
                        <div class="window">
                            <div class="Shutters-curtain"></div>
                            <div class="Shutters-top"></div>
                            <div class="Shutters-left"></div>
                            <div class="Shutters-right"></div>
                            <div class="Shutters-bottom"></div>
                            <div class="curtain-top-left">
                                <div class="curtain-top-left--x2"></div>
                            </div>
                            <div class="curtain-top-right">
                                <div class="curtain-top-right--x2"></div>
                            </div>
                            <div class="tape-left"></div>
                            <div class="tape-right"></div>
                            <div class="curtain-bottem-left">
                                <div class="curtain-bottem-left--x2"></div>
                            </div>
                            <div class="curtain-bottem-right">
                                <div class="curtain-bottem-right--x2"></div>
                            </div>
                        </div>
                    </div>
                    <div class="windowsill"></div>
                    <div class="windowsill-top"></div>
                </div>
            </div>
        </div>
        <div class="roof-first">
            <div class="first_floor_roof"></div>
            <div class="second_floor">
                <div class="second_floor-first">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
        </div>
        <div class="first_floor">
            <div class="first_floor_box">
                <div class="first_floor_lamp first_floor_lamp_left">
                    <div class="first_floor_lamp_top"></div>
                    <div class="first_floor_lamp_beam"></div>
                    <div class="first_floor_lamp_bottom"></div>
                    <div class="first_floor_lamp_circle"></div>
                </div>
                <div class="first_floor_lamp first_floor_lamp_right">
                    <div class="first_floor_lamp_top"></div>
                    <div class="first_floor_lamp_beam"></div>
                    <div class="first_floor_lamp_bottom"></div>
                    <div class="first_floor_lamp_circle"></div>
                </div>
                <div class="first_floor_box_center">
                    <div class="first_floor_box_center_roof"></div>
                    <div class="first_floor_box_section">
                        <div class="first_floor_box_section-wrapper">
                            <div class="box-window">
                                <div class="box-line"></div>
                                <div class="box-line"></div>
                                <div class="box-line"></div>
                                <div class="box-line"></div>
                                <div class="box-pr"></div>
                            </div>
                            <div class="box-window-center">
                                <div class="box-window-open">
                                    <div class="box-window-open-blinds">
                                        <div class="box-window-open-blinds-pen"></div>
                                    </div>
                                    <div class="text">
                                        <div class="letter">b</div>
                                        <div class="letter">a</div>
                                        <div class="letter">r</div>
                                        <div class="letter">b</div>
                                        <div class="letter">e</div>
                                        <div class="letter">r</div>
                                        <p class="letter-full">Shop</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="box-window-bottom-level-1">
                            <div class="box-window-bottom-item"></div>
                            <div class="box-window-bottom-item">
                                <div class="box-window-bottom-item-v"></div>
                                <div class="box-window-bottom-item-v"></div>
                                <div class="box-window-bottom-item-v"></div>
                                <div class="box-window-bottom-item-v"></div>
                                <div class="box-window-bottom-item-v"></div>
                                <div class="box-window-bottom-item-v"></div>
                                <div class="box-window-bottom-item-v"></div>
                                <div class="box-window-bottom-item-v"></div>
                                <div class="box-window-bottom-item-v"></div>
                                <div class="box-window-bottom-item-v"></div>
                                <div class="box-window-bottom-item-v"></div>
                            </div>
                            <div class="box-window-bottom-item"></div>
                        </div>
                        <div class="box-window-bottom-level-2">
                            <div class="box-window-bottom-level-item"></div>
                        </div>
                        <div class="box-window-bottom-level-3"></div>
                        <div class="box-window-bottom-level-3-r"></div>
                    </div>
                    <div class="first_floor_box_section first_floor_box_section-center">
                        <div class="box-window">
                            <div class="box-line"></div>
                            <div class="box-line"></div>
                            <div class="box-line"></div>
                            <div class="box-line"></div>
                            <div class="box-pr"></div>
                        </div>
                        <div class="box-window-center">
                            <div class="box-door-window">
                                <div class="box-door-window-wrapper"></div>
                            </div>
                            <div class="box-window-pen"></div>
                        </div>
                        <div class="box-window-center-bottom"></div>
                    </div>
                    <div class="first_floor_box_section">
                        <div class="first_floor_box_section-wrapper">
                            <div class="box-window">
                                <div class="box-line"></div>
                                <div class="box-line"></div>
                                <div class="box-line"></div>
                                <div class="box-line"></div>
                                <div class="box-pr"></div>
                            </div>
                            <div class="box-window-center">
                                <div class="box-window-open">
                                    <div class="box-window-open-blinds">
                                        <div class="box-window-open-blinds-pen"></div>
                                    </div>
                                    <div class="text">
                                        <div class="letter">b</div>
                                        <div class="letter">a</div>
                                        <div class="letter">r</div>
                                        <div class="letter">b</div>
                                        <div class="letter">e</div>
                                        <div class="letter">r</div>
                                        <p class="letter-full">Shop</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="box-window-bottom-level-1">
                                <div class="box-window-bottom-item"></div>
                                <div class="box-window-bottom-item">
                                    <div class="box-window-bottom-item-v"></div>
                                    <div class="box-window-bottom-item-v"></div>
                                    <div class="box-window-bottom-item-v"></div>
                                    <div class="box-window-bottom-item-v"></div>
                                    <div class="box-window-bottom-item-v"></div>
                                    <div class="box-window-bottom-item-v"></div>
                                    <div class="box-window-bottom-item-v"></div>
                                    <div class="box-window-bottom-item-v"></div>
                                    <div class="box-window-bottom-item-v"></div>
                                    <div class="box-window-bottom-item-v"></div>
                                    <div class="box-window-bottom-item-v"></div>
                                </div>
                                <div class="box-window-bottom-item"></div>
                        </div>
                        <div class="box-window-bottom-level-2">
                            <div class="box-window-bottom-level-item"></div>
                        </div>
                        <div class="box-window-bottom-level-3"></div>
                        <div class="box-window-bottom-level-3-l"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="floor">
            <div class="floor-top"></div>
            <div class="floor-center"></div>
            <div class="floor-bottom"></div>
        </div>
    </div>
</body>
</html>

Answer 1

По сути вы хотите уменьшить масштаб в 2,5 раза. 100/2.5=40%. В данном случае вам прекрасно поможет: transform: scale(0.4); Добавьте его в класс .main:

.main {
    z-index: 1;
    position: relative;
    width: 490rem;
    height: 420rem;
    margin: 50rem auto;
    transform: scale(0.4);
}

Answer 2

Для того чтобы решить вашу задачу нужно изменить все значения rem, умножив их на 0.4. Для гибкости можно вынести это значение в отдельную переменную, чтобы в будущем не возникло необходимости менять все значения вручную.

ПОСЛЕДНИЕ ВОПРОСЫ

21:33

Виртуальный выделенный сервер (VDS) становится отличным выбором
22:26
22:40

Создание игр для детей: первые шаги в IT мире
08:34
15:01

Основные задачи SEO оптимизатора
17:01
11:24

Выделенный сервер для игр: преимущества и недостатки
10:16
17:54

Все вопросы

ТОП-10

Все популярные вопросы

Axios отлов просроченного сертификата

У меня на localhost:8080 живёт небольшой фронтенд на vue, который при помощи axios черпает данные с localhost:1234

142

javascript

Как интегрировать на сайт данные из профиля в Инстаграме?

На сайте https://ivararu/ внизу главной страницы есть слайдер с фотками из Инстаграма, при клике на фотки открывается модальное окно с фоткой и комментариями...

136

javascript

Как объединить данные JS скрипты?

у меня есть два скрипта для формаПервый ajax скрипт отправляет ajax форму с данными на е-майл

115

javascript

Поиск и подсчет одинаковых значений массива (js)

Всем привет! Имеется массив

127