Picture gets huge in Carroussel

Question

That is the problem:

http://hotplateprensas.com.br/novo/produto.php?p=1

I’m using a plugin JQuery for viewing images of the type carroussel.

But when the image is too high it generates this problem.

I just wanted to make sure that if the height of the image is greater than the height of the image max-height = altura da div.

But as it is in a plugin, as much as I try to put the condition in several div’s nothing goes right beyond that I also check that if the View Port is less than 1000 then reduce the size of the plugin div.

Grateful that you can give me that light

<script>
 $(document).ready(function() {
    $('#vertical').lightSlider({
      gallery:true,
      item:1,
      vertical:false,
      verticalHeight:295,
      vThumbWidth:50,
      thumbItem:8,
      thumbMargin:4,
      slideMargin:0
    });  

  var ecra = window.innerWidth;
  if(ecra <= 1000) {
    $(".fotosProduto").css("width",ecra);
    $('#vertical li').css("width",ecra);
  }

  });
</script>
<?php 

   if($fotosProduto==null)  {

       echo $semFoto;

   } else {

    echo "<ul id='vertical'>";

    foreach ($fotosProduto as $foto) :

     $caminho = "_img/_fotos/_normais/".$foto->getFoto();

     if(!file_exists($caminho)) {

       $imagem = $semFoto;

     } else {

        $imagem = "<li data-thumb='".$caminho."'>
                      <img src='".$caminho."' alt='Imagem' title='Imagem' style='height:auto' />
                   </li>";    
     }              

      echo $imagem;

     endforeach;

     echo "</ul>";
 }
?>

and the plugin is lightslider

http://sachinchoolur.github.io/lightslider/

Only the html output

<link rel="stylesheet" type="text/css" href="_global/_css/jquery.cycle2.css">
<link rel="stylesheet" type="text/css" href="_global/_css/lightslider.css">
<script type="text/javascript" src="_global/_js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="_global/_js/jquery.cycle2.min.js"></script>
<script type="text/javascript" src="_global/_js/lightslider.js"></script>
<script>
 $(document).ready(function() {
    $('#vertical').lightSlider({
      gallery:true,
      item:1,
      vertical:false,
      verticalHeight:295,
      vThumbWidth:50,
      thumbItem:8,
      thumbMargin:4,
      slideMargin:0
    });  

  var ecra = window.innerWidth;
  if(ecra <= 1000) {
    $(".fotosProduto").css("width",ecra);
    $('#vertical li').css("width",ecra);
  }

  });
</script>
<div class="corpo">
  <div class="conteudo">
    <div class="produtoExibe">
      <div class="fotosProduto">
        <ul id='vertical'>
          <li data-thumb='_img/_fotos/_normais/69f5e6edba75cdea478625941dae1173.jpg'> <img src='_img/_fotos/_normais/69f5e6edba75cdea478625941dae1173.jpg' alt='Imagem' title='Imagem' style='height:auto' /> </li>
        </ul>
      </div>
      <div class="descricaoProduto">
        <h1 class="h1Centralizado">Acessório</h1>
        <br />
        <img src='_img/freteGratis.png'  alt='Frete Grátis'  title='Frete Grátis' /><br />
        Bolsa de ar sistema para o pneumático da prensa. </div>
      <div class="comprarProduto"> <a href='carrinho.php?acao=adicionar&idProduto=1'><img src='_img/comprar1.png' /></a> </div>
      <div class="caracteristicasProduto">
        <h1 class="h1Centralizado">Carcterísticas</h1>
        <br />
        <ul class="caracteristicas">
          <li style="background-color:#CCC">
            <label>Modelo</label>
            : Bolsa de ar</li>
          <li>
            <label>Bandejas</label>
            : 0</li>
          <li style="background-color:#CCC">
            <label>Peso</label>
            : 0 Kg</li>
          <li>
            <label>Prensagem</label>
            : 0 Kg</li>
          <li style="background-color:#CCC">
            <label>Comprimento</label>
            : 0 cm</li>
          <li>
            <label>Largura</label>
            : 0 cm</li>
          <li style="background-color:#CCC">
            <label>Cabo</label>
            : 0mm</li>
          <li>
            <label>Tipo de Ligação</label>
            : Bifasica</li>
          <li style="background-color:#CCC">
            <label>Potencia</label>
            :0 Whats</li>
          <li>
            <label>Consumo de energia</label>
            : 0 Whats/h</li>
          <li style="background-color:#CCC">
            <label>Corrente</label>
            : 0 Ampéres</li>
          <li>
            <label>Disjuntor Indicado</label>
            : 0 Ampéres</li>
        </ul>
      </div>
    </div>
    <script>$(".caracteristicasProduto").css("display","none");</script></div>
</div>