Div with same image height in Bootstrap

Question

Div with same image height in Bootstrap

Navigation

#1 by (1 votes)

0

I have one image on the left and another 4 blocks on the right. I needed the four blocks to follow the height of the image, even when changing the resolution.

HTML:

<divclass="container-fluid">
    <div class="row">
        <div class="col-md-6 img-container">
            <img class="img-responsive" src="{{ asset('storage/img4.jpg') }}" alt="...">
        </div>
        <div class="col-md-6">
            <div class="row">
                <div class="col-sm-6 col-md-6 container-painel">
                    <div class="painel1">
                        <img class="img-responsive" src="{{ asset('storage/massage.png') }}">
                        <h2>Título</h2>
                        <img class="img-responsive" src="{{ asset('storage/vetor.png') }}">
                        <p>Lorem ipsum dolor sit amet.</p>
                    </div>
                    <div class="painel3">
                        <img class="img-responsive" src="{{ asset('storage/massage.png') }}">
                        <h2>Título</h2>
                        <img class="img-responsive" src="{{ asset('storage/vetor.png') }}">
                        <p>Lorem ipsum dolor sit amet.</p>
                    </div>
                </div>
                <div class="col-sm-6 col-md-6 container-painel">
                    <div class="painel2">
                        <img class="img-responsive" src="{{ asset('storage/massage.png') }}">
                        <h2>Título</h2>
                        <img class="img-responsive" src="{{ asset('storage/vetor.png') }}">
                        <p>Lorem ipsum dolor sit amet.</p>
                    </div>
                    <div class="painel4">
                        <img class="img-responsive" src="{{ asset('storage/massage.png') }}">
                        <h2>Título</h2>
                        <img class="img-responsive" src="{{ asset('storage/vetor.png') }}">
                        <p>Lorem ipsum dolor sit amet.</p>
                    </div>
                </div>  
            </div>
        </div>
    </div>
</div>

CSS:

.img-container {
    padding: 0;
}

.container-painel {
   padding: 0;
}

.painel1 {
   padding: 0;
   border-bottom: 1px solid #333333;
   border-right: 1px solid #333333;
}

.painel2 {
   padding: 0;
   border-bottom: 1px solid #333333;
   border-right: 1px solid #333333;
}

.painel3 {
    padding: 0;
    border-right: 1px solid #333333;
}

.painel4 {
   padding: 0;
   border-right: 1px solid #333333;
}

html css twitter-bootstrap layout-responsivo

asked by anonymous 13.07.2017 / 23:28

1 answer

Control video volume in Banner Interstitial AdMob Firebase queries

score 1 · Accepted Answer

What was done

I added a new adapta class on all 4 elements (panel1, panel2, panel3, panel4).

This way you can manipulate all of them at the same time using Jquery.

I created the function adapta() for every time the page loads or resized it takes action.

Adaptive function logic ()

We get the height of the image on the left, then just divide by 2 and assign this value to height of class adapta so that all the right's divs occupy height identical to image the left.

$(document).ready(adapta);
$(document).on('resize', adapta);

function adapta()
{
  var altura = $('.img-responsive').css('height');

  var alturaF = altura.split('px');

 // alert(alturaF[0]/2);

  $('.adapta').css('height', alturaF[0]/2+'px');

};

Remember to insert the class adapta to the html panels.