Div with same image height in Bootstrap

Question

Div with same image height in Bootstrap

Asked 6 years, 11 months ago

Viewed 478 times

0

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

HTML:

<div class="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;
}

I think if you don’t use a css preprocessor like LESS or SASS it won’t work. I’m trying to see a way to do this without Javascript, but this kind of difficult kkkk' If you want here is a simple solution with Jquery (If you want responsive just put inside a "onresize" that works normally) https://codepen.io/anon/pen/dRrzKB

– hynzhw

2017/07/14 at 16:24

1 answer

Browser other questions tagged html css twitter-bootstrap responsive-layout

You are not signed in. Login or sign up in order to post.

by Bsalvo • **1,818** points · Answer 1 · 2017-07-14T16:39:53+00:00

What has been done

I added a new class adapta on all 4 elements (panel 1, panel 2, panel 3, panel 4).

This way it is possible to manipulate all at the same time using Jquery.

I created the function adapta() for whenever the page is loaded or resized it goes into action.

Logic of the adapts function()

We got the height of the image on the left, then just divide by 2 and assign this value in the height class adapta so that all the div’s on the right height identical to the left image.

$(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 enter the class adapta to panels in html.