Just a reminder, as I mentioned earlier, this technique uses a background image. If you have decided that a foreground image is more appropriate for your page, then the techniques presented by SamA74 and PaulOB in earler posts would be the way to go.
This first example is practically a repeat of the example that I posted earlier in that it shows a blue dashed outline around all boxes. The outline can deleted, commented out, or moved to specific containers as desired.
The .postLeft image box is floated to the left. It’s parent container, .postTop, has been assigned {overflow:hidden} to contain the float. There are other float containment methods available, such as the fabled “clearifix”.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>template</title>
<!--
https://www.sitepoint.com/community/t/overcoming-floats-and-absolute/255162
safeasfcuk
"http://www.wns.com/Portals/0/Images/HeaderBanner/desktop/1933/85/India_HD.jpg"
-->
<style type="text/css">
* {outline:1px dashed blue;}
.outer {
max-width:1040px;
margin:0 auto;
}
html, p, a, h1, h2 {
padding:0;
margin:0;
}
h2 {
color:#3c3b3f;
font-family:CaviarDreams;
font-size:1.7em;
font-weight:500;
}
.post h2 {
padding:.5em 1.5%;
}
.postTop {
overflow:hidden;
}
.postLeft {
float:left;
width:30%;
min-width:200px;
max-width:300px;
padding:1.5%;
}
.postBox {
padding-top:100%;
background-image:url("India_HD.jpg");
background-size:cover;
background-position:0 0;
}
.postRight {}
.postRight p {
line-height:1.4;
padding:.5em 2%;
}
.postBottom a {
background:transparent url(_images/posted.png) no-repeat top left;
text-decoration:none;
}
.readmore {
float:right;
}
.postBottom {
overflow:hidden;
padding:1% 2%;
}
@media screen and (max-width:400px) {
.postLeft {
float:none;
width:auto;
max-width:none;
}
.postBox {
padding-top:53%;
}
}
</style>
</head>
<body>
<div class="outer">
<section class="post">
<div class="postTop">
<div class="postLeft">
<div class="postBox"></div>
</div>
<div class="postRight">
<h2>How to travel with no money</h2>
<p>Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Vestibulum sed metus in lorem tristique ullamcorper id vitae erat. Nulla mollis sapien sollicitudin lacinia lacinia. Vivamus facilisis dolor et massa placerat, at vestibulum nisl egestas. Quis mollis nisl nunc et massa. Vestibulum sed metus in lorem tristique ullamcorper id vitae erat. Nulla mollis sapien sollicitudin lacinia lacinia. Vivamus facilisis dolor et massa placerat, at vestibulum nisl egestas.</p>
</div>
</div>
<div class="postBottom">
<a href="#">Posted 20 Feb</a>
<div class="readmore"><a href="#">Read More</a></div>
</div>
</section>
</div>
</body>
</html>
Example #2 demonstrates two methods of handling the small image.
The upper demo shows the image becoming wide at 450px (the media query width) and approximating the expected aspect ratio, then scaling down as the window becomes narrower.
The lower demo shows the image becoming wide at 450px at which time the height becomes fixed and the edges of the image become cropped to fit the narrowing image box. The code difference is found in the media query for .imageBox and .imageBox2.
The more significant gem in this last demo is the way the text is handled to add space between the text and the borders around the .postLeft box to the left. This technique applies the space to the left of the text even if the text continues past the .postLeft box and wraps against the left wall of .postTop. This is one of the few valid occasions where {position:relative} can be used to move an element. Note that margin-right is a required part of the technique.
p,h2 {
position:relative;
left:1.5%;
margin-right:3%;
}
Working page (should be entitled “Choices”) 
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Resize background images</title>
<!--
https://www.sitepoint.com/community/t/overcoming-floats-and-absolute/255162
safeasfcuk
"http://www.wns.com/Portals/0/Images/HeaderBanner/desktop/1933/85/India_HD.jpg"
NOTES: .imageBox and .imageBox2 within the media query are the only code differences in these examples.
There is no HTML <date> element. You may be thinking of the new <time> element in HTML5.
https://www.sitepoint.com/html5-time-element-guide/
-->
<style>
html,p,a,h1,h2 {
padding:0;
margin:0;
}
body {
background:#ededea;
line-height:1.5em;
font-size:100%;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
padding:30px;
}
.content {
max-width:1040px;
margin:0 auto 2em;
}
/*Standard posts */
.post {
border:1px solid #d0cccc;
background-color:#f2f2f2;
}
.postTop {
overflow:hidden;
}
.postLeft {
float:left;
width:35%;
min-width:200px;
max-width:300px;
border-right:1px solid #d0cccc;
background-color:#f2f2f2;
position:relative;
z-index:1;
padding:1.5%;
}
[class^="imageBox"] {
padding-top:100%;
background-image:url("India_HD.jpg");
background-size:cover;
background-position:0 50%;
}
h2 {
color:#3c3b3f;
font-family:CaviarDreams;
font-size:1.75em;
font-weight:500;
}
.post h2 {
border-bottom:1px solid #d0cccc; /* */
padding:2% 0;
margin-right:1.25%;
}
.postRight p {
padding:.5em 0;
}
.postBottom {
border-top:1px solid #d0cccc; /* */
overflow:hidden;
padding:.5em 4% .75em;
}
.readmore {
float:right;
}
p,h2 {
position:relative;
left:1.5%;
margin-right:3%;
}
@media screen and (max-width:450px) {
.postLeft {
float:none;
width:auto;
max-width:none;
}
.imageBox {
padding-top:55%; /* estimated */
}
.imageBox2 {
background-position:35% 50%;
padding-top:200px;
}
}
</style>
</head>
<body>
<div class="content">
<section class="post">
<div class="postTop">
<div class="postLeft">
<div class="imageBox"></div>
</div>
<div class="postRight">
<div>
<h2>Title</h2>
</div>
<p>Image scales down and keeps its aspect ratio at widths below 450px.</p>
</div>
</div>
<div class="postBottom">
<a href="#">Posted 20 Feb</a>
<div class="readmore"><a href="#">Read More</a></div>
</div>
</section>
</div>
<div class="content">
<section class="post">
<div class="postTop">
<div class="postLeft">
<div class="imageBox2"></div>
</div>
<div class="postRight">
<div>
<h2>Title</h2>
</div>
<p>Below 450px width, height of image becomes fixed, image box narrows at narrow widths and image edges are cropped; building is approx centered.</p>
</div>
</div>
<div class="postBottom">
<a href="#">Posted 20 Feb</a>
<div class="readmore"><a href="#">Read More</a></div>
</div>
</section>
</div>
</body>
</html>
If you have questions or see a mistake (yes, it happens), please let me know.
Cheers
