Niels Peeren Niels Peeren - 3 months ago 9
CSS Question

How to keep div same height at all times

Right now i have 2 divs next to eachother like so :

<div class="col-md-12 col-xs-12">

<div class="col-md-6 col-xs-12">
<img src="#"/>
<article>text</article>
</div>

<div class="col-md-6 col-xs-12">
<img src="#"/>
<article>text</article>
</div>
</div>


the CSS of the images is as follows :

max-width: 100%;
vertical-align: middle;
display: inline-block;
text-align: center;


This gives me the following.

enter image description here

In the picture the images are of the same size and the same ratio so the containers are exactly the same size.

The images in this field can be uploaded by the user so this means the images can be every size. Once i upload an image that is smaller or a different ratio the containers get a different height (since the width is at 100%).

this needs to be responsive aswell and one of the containers can be filled with a embedded youtube video (an iframe) this needs to be of the same height and width aswell as all the images.

How do i get this result?

Answer

If you want to stretch every item based on the image height, this can be achieved fairly simply using flex. I've made some slight adjustments to your markup, but this example should be illustrative. Basically, use flex-wrap to create a multi-line flex layout, limit every item's width to 50% and make sure the images have a max-width.

* {        
    box-sizing: border-box;
}
.flex {
	display: flex;
	flex-wrap: wrap;
	max-width: 800px;
}

.flex-item {
	display: flex;
	width: 50%;
}
.article {
	display: block;
	margin: 10px;
	background-color: red;
}
.article img {
	width: 100%;
    height: 50px;
    object-fit: cover;
}
<div class="col-md-12 col-xs-12 flex">
    <div class="col-md-6 col-xs-12 flex-item">
    	<div class="article">
	        <img src="http://placehold.it/500x150"/>
	        <article>text<br>more text<br>more text</article>
        </div>
    </div>

    <div class="col-md-6 col-xs-12 flex-item">
    	<div class="article">
    		<img src="http://placehold.it/500x300"/>
        	<article>text</article>
    	</div>
    </div>

    <div class="col-md-6 col-xs-12 flex-item">
	    <div class="article">
		    <img src="http://placehold.it/500x100"/>
	    <article>text</article>
    	</div>
    </div>

    <div class="col-md-6 col-xs-12 flex-item">
	    <div class="article">
	        <img src="http://placehold.it/500x170"/>
	        <article>text<br>more text</article>
    	</div>
    </div>
</div>