Maintain a square ratio in a horizontal responsive layout - html

Question

I am attempting to build a responsive material list view where each card includes an image, some textual details and some user actions.
The textual details can vary between items in the list, so the card heights can vary. As the design needs to be responsive, the width of the card can also vary.
What I need to do is ensure that the image is always a square. I've seen good answers here on how to achieve that in a vertical layout, but not in a horizontal layout.
Here is a mockup of what I am trying to achieve using Flex to show the box layout. I am not tied to Flex as part of the solution.
Sample code
.card {
display: flex;
flex-flow: row wrap;
width: 100%;
margin-bottom: 15px;
}
.card .title {
line-height: 3rem;
font-size: 1.5rem;
font-weight: 300;
}
.card .action {
background: grey;
order: 3;
flex-basis: 100%;
}
.card .content {
background: red;
order: 2;
flex-grow: 1;
}
.card .image {
background: gold;
order: 1;
flex-grow: 1;
}
<div class="row">
<div class="medium-6 columns end">
<div class="card">
<div class="content">
<span class="title">
Just a Title
</span>
</div>
<div class="action">
<p>this is an action</p>
</div>
<div class="image">
<p>Image goes here</p>
</div>
</div>
<div class="card">
<div class="content">
<span class="title">
Title with some text
</span>
<P>This is some content under the title</P>
</div>
<div class="action">
<p>this is an action</p>
</div>
<div class="image">
<p>Image goes here</p>
</div>
</div>
<div class="card">
<div class="content">
<span class="title">
Title with more text
</span>
<P>This is some content under the title</P>
<P>Second line of text</P>
</div>
<div class="action">
<p>this is an action</p>
</div>
<div class="image">
<p>Image goes here</p>
</div>
</div>
</div>
</div>

Answer 1

Try adding this script at the end of your work:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.js"></script>
<script>
var cw = $('.image').width();
$('.image').css({
'height': cw + 'px'
});
</script>
EDIT
To act upon window resize, try this:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.js"></script>
<script>
var cw = $('.image').width();
$('.image').css({
'height': cw + 'px'
});
window.onresize = function(event) {
var cw = $('.image').width();
$('.image').css({
'height': cw + 'px'
});
};
</script>

Answer 2

You can do it if your images will be square
.card {
display: flex;
flex-flow: row wrap;
width: 100%;
margin-bottom: 15px;
}
.card .title {
line-height: 3rem;
font-size: 1.5rem;
font-weight: 300;
}
.card .action {
background: grey;
order: 3;
flex-basis: 100%;
}
.card .content {
background: red;
order: 2;
flex-grow: 1;
}
.card .image {
background: gold;
order: 1;
flex: 1;
max-width: 30vw; /* scale img block with page */
}
.card .image img {
display: block;
width: 100%;
}
<div class="row">
<div class="medium-6 columns end">
<div class="card">
<div class="content">
<span class="title">
Just a Title
</span>
</div>
<div class="action">
<p>this is an action</p>
</div>
<div class="image">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=img%20goes%20here&w=300&h=300">
</div>
</div>
<div class="card">
<div class="content">
<span class="title">
Title with some text
</span>
<P>This is some content under the title</P>
</div>
<div class="action">
<p>this is an action</p>
</div>
<div class="image">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=img%20goes%20here&w=300&h=300">
</div>
</div>
<div class="card">
<div class="content">
<span class="title">
Title with more text
</span>
<P>This is some content under the title</P>
<P>Second line of text</P>
</div>
<div class="action">
<p>this is an action</p>
</div>
<div class="image">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=img%20goes%20here&w=300&h=300">
</div>
</div>
</div>
</div>