Hello! It is necessary when reducing the browser window, to reduce the main div proportionally and at the same time, that all nested divs and pictures also decrease proportionally without shifting. I have the main picture 2.png on which there are certain elements that cannot be shifted.

Code:

<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>

Help me please.

  • 2
    Maybe it's time instead of scaling to engage in adaptive page layout? - Makarenko_I_V
  • @Makarenko_I_V I am writing a website on bootstrap, but this particular moment cannot be done on it. Overlay on the picture of the set of elements in different places without offset does not work. - Dmitriy

1 answer 1

If you are against using the “benefits” of adaptive layout, then try using (example on 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)); } }

You will have many such blocks, but for different screen widths. When doing so, consider what angle to scale.

For example, if style="position: absolute;right: 5px;top: 155px;" , then it should be scaled relative to the upper right corner - .transform-origin(right, top); .

If you are not familiar with LESS but you need css, then consider that .transform(@transformation) and .transform-origin(@x: 0, @y: 0, @z: 0) functions that will substitute your body into your copper queries.

  • Thank. Not really understood. I can not understand. Could you please show by example. I have a picture (tree) superimposed on the main picture, and other pictures are already superimposed on the tree (for example). When reducing the screen, the main picture decreases, the tree with superimposed pictures does not decrease, the tree and the superimposed pictures are wrapped in a div. - Dmitriy
  • The main picture (background) is reduced by max-width: 100%; - Dmitriy