How to make a fluid layout equally spaced - html

Question

My problem is both a design and code issue, I have a diagonal layout which consists of a paragraph of text paired with an image which is then flipped (image then paragraph) on the next row.
The problem is I don't know the height of the paragraph or the height of the image so how do I make it equally spaced for the end user?
Here is a fiddle that may help explain my question.
My code:
<div class="container">
<div class="one">
<p>
</p>
</div>
<div class="two">
<img src="https://cdn.jamesedition.com/media/W1siZiIsImxpc3RpbmdfaW1hZ2VzLzIwMTcvMDkvMDkvMjEvNTgvNDUvMGJkYTRmYTMtMTY1Yy00YmQzLThhZTEtNTlhNzc2NGYwNDBjL3AxLUoycDhOV0xHdnM4RDNVdUphaW5xRWxMMWxEcnpaQzlyNXg0a2xKREUuanBnIl0sWyJwIiwidGh1bWIiLCIyMDAweCJdLFsicCIsIndhdGVybWFyayJdLFsicCIsImVuY29kZSIsImpwZyIsIi1zdHJpcCAtcXVhbGl0eSA4MCAtaW50ZXJsYWNlIFBsYW5lIl1d/2015-lamborghini-aventador-roadster.jpg?sha=6b14013f088579ce">
</div>
</div>
<div class="container">
<div class="two">
<img src="https://cdn.jamesedition.com/media/W1siZiIsImxpc3RpbmdfaW1hZ2VzLzIwMTcvMDkvMDkvMjEvNTgvNDUvMGJkYTRmYTMtMTY1Yy00YmQzLThhZTEtNTlhNzc2NGYwNDBjL3AxLUoycDhOV0xHdnM4RDNVdUphaW5xRWxMMWxEcnpaQzlyNXg0a2xKREUuanBnIl0sWyJwIiwidGh1bWIiLCIyMDAweCJdLFsicCIsIndhdGVybWFyayJdLFsicCIsImVuY29kZSIsImpwZyIsIi1zdHJpcCAtcXVhbGl0eSA4MCAtaW50ZXJsYWNlIFBsYW5lIl1d/2015-lamborghini-aventador-roadster.jpg?sha=6b14013f088579ce">
</div>
<div class="one">
<p>
</p>
</div>
</div>
<div class="container">
<div class="three">
<p>
</p>
</div>
<div class="two">
<img src="https://cdn.jamesedition.com/media/W1siZiIsImxpc3RpbmdfaW1hZ2VzLzIwMTcvMDkvMDkvMjEvNTgvNDUvMGJkYTRmYTMtMTY1Yy00YmQzLThhZTEtNTlhNzc2NGYwNDBjL3AxLUoycDhOV0xHdnM4RDNVdUphaW5xRWxMMWxEcnpaQzlyNXg0a2xKREUuanBnIl0sWyJwIiwidGh1bWIiLCIyMDAweCJdLFsicCIsIndhdGVybWFyayJdLFsicCIsImVuY29kZSIsImpwZyIsIi1zdHJpcCAtcXVhbGl0eSA4MCAtaW50ZXJsYWNlIFBsYW5lIl1d/2015-lamborghini-aventador-roadster.jpg?sha=6b14013f088579ce">
</div>
</div>
.one{
height:200px;
background:red;
width:50%;
float:left;
}
.two{
float:left;
height:auto;
background:blue;
width:50%;
}
.three{
float:left;
height:400px;
background:blue;
width:50%;
}
.container{
height:auto;
display:flex;
flex-direction:row;
align-items:center;
}
img{
float:left;
width:100%;
}
Class one is the paragraph ( shorter paragraph )
Class .two is the picture
Class .three is a longer paragraph
as you can see row one and two are equally spaced but row three has a larger space which wont look good to the end user.
Any help is appreciated.

Answer 1

Drop the img and use background-image and background-size: cover. With that you can make the image to completely cover the space left.
Stack snippet
.one {
height: 200px;
background: red;
width: 50%;
}
.two {
background: url('https://cdn.jamesedition.com/media/W1siZiIsImxpc3RpbmdfaW1hZ2VzLzIwMTcvMDkvMDkvMjEvNTgvNDUvMGJkYTRmYTMtMTY1Yy00YmQzLThhZTEtNTlhNzc2NGYwNDBjL3AxLUoycDhOV0xHdnM4RDNVdUphaW5xRWxMMWxEcnpaQzlyNXg0a2xKREUuanBnIl0sWyJwIiwidGh1bWIiLCIyMDAweCJdLFsicCIsIndhdGVybWFyayJdLFsicCIsImVuY29kZSIsImpwZyIsIi1zdHJpcCAtcXVhbGl0eSA4MCAtaW50ZXJsYWNlIFBsYW5lIl1d/2015-lamborghini-aventador-roadster.jpg?sha=6b14013f088579ce') center;
background-size: cover;
border: 1ps solid red;
width: 50%;
}
.three {
height: 400px;
background: blue;
width: 50%;
}
.container {
display: flex;
}
<div class="container">
<div class="one">
<p>
</p>
</div>
<div class="two">
</div>
</div>
<div class="container">
<div class="two">
</div>
<div class="one">
<p>
</p>
</div>
</div>
<div class="container">
<div class="three">
<p>
</p>
</div>
<div class="two">
</div>
</div>
Or if the whole picture should be visible, use background-size: contain instead.
Stack snippet
.one {
height: 200px;
background: red;
width: 50%;
}
.two {
background-image: url('https://cdn.jamesedition.com/media/W1siZiIsImxpc3RpbmdfaW1hZ2VzLzIwMTcvMDkvMDkvMjEvNTgvNDUvMGJkYTRmYTMtMTY1Yy00YmQzLThhZTEtNTlhNzc2NGYwNDBjL3AxLUoycDhOV0xHdnM4RDNVdUphaW5xRWxMMWxEcnpaQzlyNXg0a2xKREUuanBnIl0sWyJwIiwidGh1bWIiLCIyMDAweCJdLFsicCIsIndhdGVybWFyayJdLFsicCIsImVuY29kZSIsImpwZyIsIi1zdHJpcCAtcXVhbGl0eSA4MCAtaW50ZXJsYWNlIFBsYW5lIl1d/2015-lamborghini-aventador-roadster.jpg?sha=6b14013f088579ce');
background-position: center center; /* or "left top", and so on */
background-repeat: no-repeat; /* or "repeat-y", and so on */
background-size: contain;
border: 1ps solid red;
width: 50%;
}
.three {
height: 400px;
background: blue;
background-repeat: no-repeat; /* or "repeat-y", and so on */
width: 50%;
}
.three + .two { /* where class .two comes after .three */
background-repeat: repeat-y; /* repeat vertically */
background-position: center top; /* start at "center top" */
}
.container {
display: flex;
}
<div class="container">
<div class="one">
<p>
</p>
</div>
<div class="two">
</div>
</div>
<div class="container">
<div class="two">
</div>
<div class="one">
<p>
</p>
</div>
</div>
<div class="container">
<div class="three">
<p>
</p>
</div>
<div class="two">
</div>
</div>
Updated based on a comment.
If the image shouldn't scale up, but scale down, you either need a script to detect the image size and toggle between background-size: contain (scale down) and background-size: auto (keep org. size), or, as shown below, using the img, combined with transform to center it. The latter won't allow to control repeat though.
Stack snippet
.one {
height: 200px;
background: red;
width: 50%;
}
.two {
position: relative;
width: 50%;
overflow: hidden;
}
.two img {
display: block;
max-width: 100%;
max-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.three {
height: 400px;
background: blue;
width: 50%;
}
.container {
display: flex;
}
<div class="container">
<div class="one">
<p>
</p>
</div>
<div class="two">
<img src="http://placehold.it/100" alt="">
</div>
</div>
<div class="container">
<div class="two">
<img src="http://placehold.it/800" alt="">
</div>
<div class="one">
<p>
</p>
</div>
</div>
<div class="container">
<div class="three">
<p>
</p>
</div>
<div class="two">
<img src="http://placehold.it/800" alt="">
</div>
</div>