CSS масштабировать весь div под ширину экрана (transform scale)

221

25 января 2019, 16:30

Есть div блок с множеством элементов, включая картинки. Сейчас он по ширине вылазить за экран на малых экранах.

Задача - масштабировать его под ширину экрана, т.е. пропорционально уменьшить.

transform-origin left
transform scale(.3)

Проблема здесь в том, что не могу вместо .3 вставить, например, 1vw - это бы решило проблему.

Возможно ли как-то сконвертировать vw (px) в число средствами css/stylus (что бы получилось как бы scale(1vw))? Другие способы решения?

Javascript не может здесь быть использован, только css/stylus.

thumb_mw = 120px
thumb_mh = 80px
thumb_border = 2px
sectnsBrdr = 1px
vwidth = (thumb_mw + thumb_border * 2)px
vheight = (thumb_mh * 3 + thumb_border * 3 * 2)px
hwidth = (thumb_mw * 3 + thumb_border * 3 * 2)px
hheight = (thumb_mh + thumb_border * 2)px
mainImgGap = 8px
galWidth = hwidth + vwidth * 2 + mainImgGap
galHeight = vheight + hheight * 2 + mainImgGap

Это стили размеров моего "див".

Answer 1

body {margin: 0;} 
 
.wrapper-wrap {display: block; width: 100wh; height: 100vh; overflow: auto;} 
 
.wrapper {display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden;} 
.wrapper p, .wrapper h1 {margin: 0; padding: 0;} 
.wrapper p {display: block; width: 100%; height: 25px;} 
.wrapper h1 {display: block; width: 100%; height: 40px;} 
.wrapper img {display: block; width: 100%; height: calc(100% - 65px); object-fit: contain;}

<div class="wrapper-wrap"> 
  <div class="wrapper"> 
    <p> 
      <span>Ϯ</span> 
      <a href="#">dkajckjsdbkvsdbk</a> 
    </p> 
    <img src='https://www.simtropolis.com/objects/screens/monthly_2018_09/Scr1.png.074054387d0b30669e9dfb259ac4377f.png' /> 
    <h1>TTTTTTTTTTTTTTTTT kabdsakdbaksd</h1> 
  </div> 
</div>