Question

在下面的代码中，如果JavaScript中的height="246" width="188为var h，我只想包含图片的< 600。

<script>
  var h = window.innerHeight
  || document.documentElement.clientHeight
  || document.body.clientHeight;
</script>

<div class="row">
  <div class="col-md-8 col-md-offset-2">
    <div class="panel panel-default">
      <div class="panel-body">
        <center><img class="visible-xs hidden-sm hidden-md hidden-lg" src="{% static 'intro_small.png' %}" alt="str8RED" height="246" width="188"/></center>
        <a href="" class="btn btn-info btn-block .btn-lg" style="font-size: 20px">WHAT IS str8RED?</a><a href="https://str8red.com/selectteams/0/0/" style="font-size: 20px" class="btn btn-success btn-block .btn-lg">PLAY str8RED <span style="font-size: 20px" class="glyphicon glyphicon-play-circle" aria-hidden="true"></a>
      </div>
    </div>
  </div>
</div>

我试图给图片id并将其与.innerHTML一起使用，但没有任何乐趣。

任何指导都将不胜感激。

Answer 1

为图像添加一个新类并使用该类添加css或类似@ yuriy636表示你也可以使用CSS @media

    <script>
      var h = window.innerHeight
      || document.documentElement.clientHeight
      || document.body.clientHeight;
if(h < 600){
$('.test').css('height','246');
$('.test').css('width','188');
}
    </script>

    <div class="row">
      <div class="col-md-8 col-md-offset-2">
        <div class="panel panel-default">
          <div class="panel-body">
            <center><img class=" test visible-xs hidden-sm hidden-md hidden-lg" src="{% static 'intro_small.png' %}" alt="str8RED" height="246" width="188"/></center>
            <a href="" class="btn btn-info btn-block .btn-lg" style="font-size: 20px">WHAT IS str8RED?</a><a href="https://str8red.com/selectteams/0/0/" style="font-size: 20px" class="btn btn-success btn-block .btn-lg">PLAY str8RED <span style="font-size: 20px" class="glyphicon glyphicon-play-circle" aria-hidden="true"></a>
          </div>
        </div>
      </div>
    </div>

JavaScript：基于窗口高度的图像高度

1 个答案: