1

Здравствуйте! Необходимо при уменьшении окна браузера, уменьшать главный div пропорционально и при этом, чтобы все вложенные div и картинки уменьшались также пропорционально без сдвига. У меня стоит главная картинка 2.png на которой находятся определённые элементы, которые смещать нельзя.

Код:

<div style="position: relative;">
    <div style="position: absolute;"><img src="../images/2.png"/></div>
    <div style="position: absolute;right: 5px;top: 155px;"><img src="../views/vid/images/f.png"/></div>
<ul class="bt-nut" style="position: absolute;right: 5px;top: 155px;">
        <li>
            <a href="" class="link-desc">
                <div class="ch-item2" style="background:url(../images/wt.jpg) center center no-repeat;top: 154px;right: 20px;"> 
                    <div class="ch-info-wrap2">
                        <div class="ch-info2">
                            <div class="ch-info-front2" style="background:url(../images/wt.jpg) center center no-repeat;"></div>
                            <div class="ch-info-back2" style="background:url(../images/wt.jpg) center center no-repeat;">
                                <div>
                                    <div>

                                        <span class="sp2"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </a> 
        </li>   
</ul>
</div>       

Помогите, пожалуйста.

2
  • 2
    Может пора вместо масштабирования заниматься адаптивной версткой страниц? 26 окт 2016 в 6:09
  • @Makarenko_I_V я пишу сайт на bootstrap, но выполнить именно этот момент не получается на нём. Наложение на картинку множества элементов в разных местах без смещения не получается. 26 окт 2016 в 8:23

1 ответ 1

2

Если Вы противник использования "благ" адаптивной верстки, то попробуйте использовать (пример на LESS):

.transform(@transformation) {
    /* @alternate */ -webkit-transform: @transformation;
    /* @alternate */ -moz-transform: @transformation;
    /* @alternate */ -o-transform: @transformation;
    /* @alternate */ -ms-transform: @transformation;
    transform: @transformation;
}

.transform-origin(@x: 0, @y: 0, @z: 0) {
    -webkit-transform-origin: @x @y @z;
    -moz-transform-origin: @x @y @z;
    -o-transform-origin: @x @y @z;
    -ms-transform-origin: @x @y @z;
    transform-origin: @x @y @z;
}

@media (max-width: 776px) {
    .obj1 {
        .transform-origin(center, top);
        .transform(scale(0,5));
    }
}

Таких блоков у Вас будет много, но для разной ширины экрана. При этом учитывайте относительно какого угла масштабировать.

Например если style="position: absolute;right: 5px;top: 155px;", то масштабировать следует относительно правого верхнего угла - .transform-origin(right, top);.

Если не знакомы с LESS а Вам нужен css, то считайте что .transform(@transformation) и .transform-origin(@x: 0, @y: 0, @z: 0) функции которые подставят свое тело в Ваши меди запросы.

2
  • Спасибо. Не особо понял. не могу разобраться. Не могли бы Вы, пожалуйста, показать на примере. У меня на главную картинку накладывается еще картинка (дерево), а на дерево уже накладываются другие картинки (к примеру). При уменьшении экрана главная картинка уменьшается, дерево с наложенными картинками не уменьшается, дерево и картинки наложенные обёрнуты в div. 26 окт 2016 в 10:06
  • Главная картинка (фон) уменьшается за счет max-width:100%; 26 окт 2016 в 10:09

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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