3
respostas

Delimitar uma altura limite para Row bootstra 3

Olá, bom dia galera!

Estou com uma dificuldade em deixar essa linha ajustada com uma mesma altura. Estou usando bootstrap 3 , a linha esta dividida em duas colunas, a da esquerda com imagem e a da direita com um vídeo. Preciso que a linha como um todo fique com a mesma altura, mas o vídeo acaba expandindo, existe alguma maneira simples de manter ele contido no mesmo tamanho que a imagem da esquerda?

Além disso o vídeo fica sempre em um formato quadrado, so diminuindo a altura quando eu controlo a largura usando "max-width", existe algum modo de manter essas duas características independentes?

<div class="row">
            <div class="col-lg-6 col-md-8 col-sm-12" > 

                <div class="thumbnail">
                    <a href="APENAS UM EXEMPLO">
                        <img src="img/igpm_exemplo.jpg" style="max-width:75%;"></a>
                    <div class="blocoTextoNoticia">
                        <a href="APENAS UM EXEMPLO" class="noUnderline"><h4> confira as atualizações do indice em julho</h4></a>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-md-4 col-sm-12">
                <div>
                <object>
                    <!--<video src="exemplo.mp4" autostart="true" width="120%" loop="true">-->
                    <video style="max-width:80%; align-content:center;" id="player-video" src="" type="video/mp4"> <!--controls loop autoplay-->
                            <!--<source src="exemplo.mp4" type="video/mp4"=>
                             Your browser does not support the video tag.-->
                        </video>
                </object>
                </div>
            </div>
        </div>
3 respostas

Oi Gabriel tudo bem?

Você usou max-width que é largura máxima. O correto seria max-height .

Espero ter ajudado!!!

Oi André! Sim, neste caso tinha usado o max-width realmente, mas mesmo adicionando o max-height ele não causa nenhuma alteração.

Alias, tentei fazer

<div class="row" style="max-height:380px;">

mas mesmo assim o conteúdo das colunas não se mantém dentro deste limite. Este é o comportamento normal no bootstrap? Estou começando a trabalhar com ele e achei que as colunas precisassem obrigatoriamente respeitar as linhas.

Deveria funcionar, pode ser que haja algum conflito. Poderia colocar a pasta do seu projeto no github por gentileza? Assim posso analisar melhor o que está acontecendo.