Автоматически устанавливать масштаб элемента в зависимости от высоты окна просмотра

Question

Чтобы масштабировать элемент с помощью CSS на основе различных высот представления, утомительно сказать, и если ИМО не понадобится. Опять же, я мог бы быть совершенно неправ.

Мне интересно, можно ли использовать jQuery, чтобы автоматически установить масштаб элемента в зависимости от высоты окна просмотра?

Я проверил каждую ссылку, которую я могу найти здесь, в Stackflow, но ничего не сделал, и я проверил http://ricostacruz.com/jquery.transit/, который кажется жизнеспособным вариантом, но я не знаю, как рассчитать высоту и превратить ее в значение, чтобы я мог используйте его для шкалы трансформации CSS. Я не уверен, но мне могут понадобиться «контрольные точки», так что конкретная высота будет предустановленной.

Мне также нужно будет настроить масштаб вручную, чтобы я мог настроить масштабирование, чтобы элемент соответствовал большинству видовых экранов.

Это мой пример: http://testsiten.se/modernaglas/images/showcase/bedroom/

мне нужен весь контент в рамках класса .scales в масштабе в зависимости от высоты окна просмотра, а также обновить, если ориентация изменяется.

Ширина такая же, как и высота, поэтому она не должна представлять проблемы, поскольку она никогда не будет шире, чем высота.

Я НЕ хочу менять высоту .scales, так как это разрушит весь дизайн.

Я сделал некоторые реальные дерьмовые запросы СМИ CSS, которые не были очищены, так как я решил, что это просто нужно сделать все это с помощью jQuery.

Это мой CSS.

body, html{ background-color: #333333; font-family: tahoma; margin: 0; padding: 0; } 
img{background: none} 
h1 {font-size: 18px; margin: 0; font-weight: normal; text-align: center} 
#ChangableElements {width: 958px; margin:0 auto; } 
#navigation {background-color: #bdc7c9; color: #6e7377;padding: 7px 8px 5px 21px;} 
#navigation div div {display: inline-block;} 
#navigation div div span{display: block;} 
.nav_glas, .nav_ram {display: inline-block;font-size: 13px;text-align: center;} 
.nav_glas div, .nav_ram div{padding: 1px 13px 0 10px;} 
.nav_glas div a, .nav_ram div a{display: inline-block; margin: 8px 0 10px;} 
.nav_ram{float: right;} 
.work_area {margin-bottom: 0; background: url("images/bg_image.png") repeat scroll 0 0 transparent; height: auto;width: 958px;} 

.border, .grid{margin-top: 0px;position: absolute;top: 0;} 
.grid_on {width: 50px} 
.headers h1{display: inline-block;} 
.headers h1:first-child{float: left; margin-left: 10px; } 
.headers{display: block!important;padding: 0 !important;} 


.hidden {display: none;} 

Один из моих медиазапросы

@media only screen and (min-device-width : 719px) and (max-device-width : 721px) and (orientation : portrait) { 
div.scales 
{ 
    transform: scale(0.37); 
    -ms-transform: scale(0.37); /* IE 9 */ 
    -webkit-transform: scale(0.37); /* Safari and Chrome */ 
    -o-transform: scale(0.37); /* Opera */ 
    -moz-transform: scale(0.37); /* Firefox */ 
    transform-origin: top center; 
    -ms-transform-origin: top center; 
    -webkit-transform-origin: top center; 
    -o-transform-origin: top center; 
    -moz-transform-origin: top center; 
} 
} 

Это мой JQuery:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script type="text/javascript"> 

    function changeImage(el, img_url) { 
     $(document).find(el).attr('src', img_url); 
    } 
    $(document).ready(function(){ 
     // add color btns event 
     $('.nav_glas').find('a.spegel').click(function(){ 
      changeImage('#mirror', 'images/spegel.png'); 
     }); 
     $('.nav_glas').find('a.vit_traskiva').click(function(){ 
      changeImage('#mirror', 'images/vit_traskiva.png'); 
     }); 
     $('.nav_glas').find('a.vitt_glas').click(function(){ 
      changeImage('#mirror', 'images/vitt_glas.png'); 
     }); 
     $('.nav_glas').find('a.metall_glas').click(function(){ 
      changeImage('#mirror', 'images/metall_gra.png'); 
     }); 
     $('.nav_glas').find('a.gult_glas').click(function(){ 
      changeImage('#mirror', 'images/gult_glas.png'); 
     }); 
     $('.nav_glas').find('a.rott_glas').click(function(){ 
      changeImage('#mirror', 'images/rott_glas.png'); 
     }); 
     $('.nav_glas').find('a.svart_glas').click(function(){ 
      changeImage('#mirror', 'images/svart_glas.png'); 
     }); 
    }); 
</script> 
<script type="text/javascript"> 
    function changeImage(el, img_url) { 
     $(document).find(el).attr('src', img_url); 
    } 
    var app = { 
     isActive: function(el){ 
      if($(el).hasClass('active')) { 
       return true; 
      } 
      else { 
       return false; 
      } 
     }, 
     whoActive: function(){ 
      return $('.active').attr('id'); 
     }, 
     change_grid: function(image){ 
      changeImage('#grid', image); 
     } 
    } 
    $(document).ready(function(){ 
     // add color btns event 
     $('.nav_ram').find('a.vit').click(function(){ 

      $('a').removeClass('active'); 
      $(this).addClass('active'); 
      changeImage('#border', 'images/vit_el.png'); 
      app.change_grid('images/grid_vit.png'); 


     }); 
     $('.nav_ram').find('a.silvermatt').click(function(){ 
      $('a').removeClass('active'); 
      $(this).addClass('active'); 
      changeImage('#border', 'images/silver_el.png'); 
      app.change_grid('images/grid_silvermatt.png'); 
     }); 
     $('.nav_ram').find('a.svart').click(function(){ 
      $('a').removeClass('active'); 
      $(this).addClass('active'); 

      changeImage('#border', 'images/svart_blank_el.png'); 
      app.change_grid('images/grid_svart.png'); 
     }); 

     // grid_turn_on event 
     $('.grid_turn_on').click(function(event){ 

      var grid_on = $('.grid_on'); // div el 
      var grid = $('#grid'); 
      var is_hidden = false; 

      if(grid.hasClass('hidden')) { 
       is_hidden = true; 
      } 
      else { 
       is_hidden = false; 
      } 

      log(app.whoActive()); 
      switch (app.whoActive()) { 
       case 'vit': 
        log('is vit'); 
        if(is_hidden) { 
         grid.removeClass('hidden'); 
         grid_on.find('span').empty().append('Ja/Nej'); 
         grid_on.find('img').attr('src','images/grid_on.jpg'); 
         changeImage('#grid', 'images/grid_silvermatt.png'); 
        } else { 
         grid.addClass('hidden'); 
         grid_on.find('span').empty().append('Ja/Nej'); 
         grid_on.find('img').attr('src','images/grid_off.jpg'); 
        } 


        break; 
       case 'silvermatt': 
        log('is silver'); 
        if(is_hidden) { 
         grid.removeClass('hidden'); 
         grid_on.find('span').empty().append('Ja/Nej'); 
         grid_on.find('img').attr('src','images/grid_on.jpg'); 
         changeImage('#grid', 'images/grid_silvermatt.png'); 
        } else { 
         grid.addClass('hidden'); 
         grid_on.find('span').empty().append('Ja/Nej'); 
         grid_on.find('img').attr('src','images/grid_off.jpg'); 
        } 

        break; 
       case 'svart': 
        log('is svart'); 
        if(is_hidden) { 
         grid.removeClass('hidden'); 
         grid_on.find('span').empty().append('Ja/Nej'); 
         grid_on.find('img').attr('src','images/grid_on.jpg'); 
         changeImage('#grid', 'images/grid_svart.png'); 
        } else { 
         grid.addClass('hidden'); 
         grid_on.find('span').empty().append('Ja/Nej'); 
         grid_on.find('img').attr('src','images/grid_off.jpg'); 
        } 
        break; 
       default: 
        if(is_hidden) { 
         grid.removeClass('hidden'); 
         grid_on.find('span').empty().append('Ja/Nej'); 
         grid_on.find('img').attr('src','images/grid_on.jpg'); 
        } 
        else { 
         grid.addClass('hidden'); 
         grid_on.find('span').empty().append('Ja/Nej'); 
         grid_on.find('img').attr('src','images/grid_off.jpg'); 
        } 
      } 



     }); 
    }); 
</script> 

И это мой HTML.

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width"> 
    <title>mirror</title> 
</head> 

<body> 
    <div class="scales" id="ChangableElements"> 
     <div class="work_area"> 
      <img src="images/grid_svart.png" alt="" id="grid" class="grid"> 
      <img src="images/svart_blank_el.png" alt="" id="border" class="border"> 
      <img src="images/vitt_glas.png" alt="" id="mirror"> 
     </div> 
     <div id="navigation"> 
      <div class="nav_glas"> 
       <h1>Välj färg på glas/skiva</h1> 
       <div><a class="spegel"><img src="images/pic1.jpg" alt=""></a><span>Spegel</span></div> 
       <div><a class="vit_traskiva"><img src="images/pic2.jpg" alt=""></a><span>Vit träskiva</span></div> 
       <div><a class="vitt_glas"><img src="images/pic3.jpg" alt=""></a><span>Vitt glas</span></div> 
       <div><a class="metall_glas"><img src="images/pic4.jpg" alt=""></a><span>Metallgrått glas</span></div> 
       <div><a class="gult_glas"><img src="images/pic5.jpg" alt=""></a><span>Gult glas</span></div> 
       <div><a class="rott_glas"><img src="images/pic6.jpg" alt=""></a><span>Rött glas</span></div> 
       <div><a class="svart_glas"><img src="images/pic7.jpg" alt=""></a><span>Svart glas</span></div> 
      </div> 
      <div class="nav_ram" id="tfoot"> 
       <div class="headers"> 
        <h1>Spröjs</h1> 
        <h1>Välj färg på dörrens ram</h1> 
       </div> 
       <div class="grid_on"><a class="grid_turn_on" ><img src="images/grid_on.jpg" alt=""></a><span>Ja/Nej</span></div> 
       <div><a class="vit" id="vit"><img src="images/pic2_1.jpg" alt=""></a><span>Vit blank</span></div> 
       <div><a class="silvermatt" id="silvermatt"><img src="images/pic2_2.jpg" alt=""></a><span>Silvermatt</span></div> 
       <div><a class="svart" id="svart"><img src="images/pic2_3.jpg" alt=""></a><span>Svart blank</span></div> 
      </div> 
     </div> 
    </div> 
</body> 

</html> 

Как видно, у меня есть много элементов внутри шкал, и там есть фоновое изображение. Вот почему мне нужно масштабировать, а не устанавливать высоту, потому что столько элементов зависит от масштаба .scales.

Надеюсь, я понял, что понял. : D

Редактировать: Наконец-то узнал несколько jQ, чтобы получить этот функционал.

<script type="text/javascript"> 
     $(document).ready(function(){ 
      $(window).on('resize', function(){ 
       var vpheight = $(window).height(); 
       var vpwidth = $(window).width(); 

     if(vpwidth>vpheight) { 
      // Landscape 
      var height = $(window).height() * 0.00148; 
      var width = height/2 * -958; 
      $('.scales').css('transform', 'scale(' + height + ')'); 
      $('.scales').css('-ms-transform', 'scale(' + height + ')'); 
      $('.scales').css('-webkit-transform', 'scale(' + height + ')'); 
      $('.scales').css('-o-transform', 'scale(' + height + ')'); 
      $('.scales').css('-moz-transform', 'scale(' + height + ')'); 
      $('#ChangableElements').css({'left': width + 'px'}); 
     } else if(vpwidth <=720 && vpheight > 569) { 
      var height = $(window).height() * 0.000675; 
      var width = height/2 * -958; 
      $('.scales').css('transform', 'scale(' + height + ')'); 
      $('.scales').css('-ms-transform', 'scale(' + height + ')'); 
      $('.scales').css('-webkit-transform', 'scale(' + height + ')'); 
      $('.scales').css('-o-transform', 'scale(' + height + ')'); 
      $('.scales').css('-moz-transform', 'scale(' + height + ')'); 
      $('#ChangableElements').css({'left': width + 'px'}); 
     } else { 
      // Portrait 
      var height = $(window).height() * 0.000895; 
      var width = height/2 * -958; 
      $('.scales').css('transform', 'scale(' + height + ')'); 
      $('.scales').css('-ms-transform', 'scale(' + height + ')'); 
      $('.scales').css('-webkit-transform', 'scale(' + height + ')'); 
      $('.scales').css('-o-transform', 'scale(' + height + ')'); 
      $('.scales').css('-moz-transform', 'scale(' + height + ')'); 
      $('#ChangableElements').css({'left': width + 'px'}); 
     } 
     }).resize() 
    }); 
    </script> 

Странная vpwidth < = 720 & & vpheight> 569 для принуждая свою функцию Samsung Galaxy S3 правильно. Странное разрешение ...

Answer 1

Вы можете использовать $(window).height(), как в:

var winHeight = $(window).height(); 

Затем измените ширину в зависимости от высоты и установите оба свойства, что-то вроде:

$("#theElement").css({'width':varWidth, 'height':varHeight}); 

Answer 2

Это достаточно легко масштабировать верхний уровень элемент к некоторому проценту высоты просмотра. Просто установите свойство height на html и body на 100%, а затем любой дочерний элемент тела может использовать процентную высоту и соответствовать высоте окна просмотра.

Например, что-то вроде CSS ниже сделало бы div с классом шкалой заполнить высоту окна просмотра. Example codepen

html, body { 
    height:100%; 
    margin:0; 
} 
.scale { 
    background-color:orange; 
    width:200px; 
    height:100%; 
    margin:0 auto; 
} 

Если вы не слишком беспокоиться о старых браузерах, вы также можете просто видовых единиц в любом месте в разметке. Это упрощает работу, а также позволяет установить ширину на основе высоты окна просмотра или наоборот.

Например, квадрат со сторон, соответствующей высоту окна просмотра может быть реализован следующим образом:

body { 
    margin:0; 
} 
.scale { 
    background-color:orange; 
    width:100vh; 
    height:100vh; 
    margin:0 auto; 
} 

Тем не менее, видовые единицы не всегда сразу реагирует на изменение размера и могут вести себя неожиданно, когда скроллбар участвуют, поэтому есть компромиссы.