Align divs within a div when images are present - html

Question

I am having trouble figuring out the proper CSS for this page. I would like to maintain a responsive design so that images will re-size for the container they are in. If you look at this JSFiddle in Chrome and Safari it works fine. The images do not resize in FireFox or IE 11. The larger full images do not show on an iPad or iPhone at all. I'm not sure where to turn to next.
Here's the HTML
<div class="colab_page_block_full colab_margin_bottom">
<div class="colab_page_block_half colab_page_block_left colab_top">
<img src="https://www.filzfelt.com/images/pages/collaborators-chiara-assets/chiara-debenedetti-01.jpg" alt="" class="colab_image colab_bottom">
</div>
<div class="colab_page_block_half colab_page_block_right">
<h1 class="colab_text_padding">About Chiara Debenedetti</h1>
<p class="colab_text_padding">Chiara Debenedetti was born in Italy in 1982 and graduated from the European Design Institute of Milan in 2003. She founded Harta Design in 2011 and specializes in packaging, logos and corporate identity for luxury brands in the fashion, fragrance
and food and beverage industries.</p>
<p class="colab_text_padding">“Design for me is going beyond the visual form in order to develop the material aspect. We have five senses, but we often forget about touch. And yet this is the sense that allows us to first interact with the reality that surrounds us: the mother-daughter
relationship comes to mind. In my daily work as a designer, whether I am dealing with graphics or home décor objects, I always pay particular attention to the materials. My studio has become a depository of paper and textiles. With Bloomx, I aimed
to highlight the X-factor of felt: its feeling of warmth to the touch together with the lightness of the shapes that one can create at will.” </p>
</div>
</div>
<div class="colab_page_block_full colab_margin_bottom">
<img src="https://www.filzfelt.com/images/pages/collaborators-chiara-assets/chiara-debenedetti-02.jpg" alt="" class="colab_image colab_bottom">
</div>
<div class="colab_page_block_full colab_margin_bottom">
<div class="colab_page_block_half colab_page_block_left colab_bottom">
<img src="https://www.filzfelt.com/images/pages/collaborators-chiara-assets/chiara-debenedetti-03.jpg" alt="" class="colab_image colab_bottom">
</div>
<div class="colab_page_block_half colab_page_block_right">
<h2 class="colab_text_padding">About Bloomx</h2>
<p class="colab_text_padding colab_margin_bottom">Bloomx is a modular product that marries design and mathematics while providing strong graphic patterning through the play of positive and negative space. The exponent ‘ x’ (best known as ‘ power’ ) represents the infinite solutions in quantity, colors,
and shape. By pairing the single module—a clean essential shaped 6 petals flower—with header options, Bloomx can provide soft and textural space separation as flexible room dividers. 63 colors of 100% Wool Design Felt can be configured in limitless
ways and the product can grow or shrink as needed by adding or removing modules. Plus, the product can be quickly and easily reconfigured in the future as needs or tastes change.</p>
<img src="https://www.filzfelt.com/images/pages/collaborators-chiara-assets/chiara-debenedetti-04.jpg" alt="" class="colab_image colab_bottom">
</div>
</div>
<div class="colab_page_block_full">
<img src="https://www.filzfelt.com/images/pages/collaborators-chiara-assets/chiara-debenedetti-05.jpg" alt="" class="colab_image colab_bottom">
</div>
And here's the CSS that I have so far.
.colab_page_block p {
margin: 0;
font-style: normal;
font-weight: normal;
font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 1.5;
color: #585858;
margin-top: 1.4em;
}
.colab_page_block h1 {
margin: 0;
font-style: normal;
font-weight: normal;
-webkit-font-smoothing: antialiased;
font-family: Museo-300, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 2rem;
line-height: 1;
color: #2f292a;
}
.colab_page_block_full {
width: 100%;
overflow: auto;
display: table;
border: 1px solid black;
}
.colab_page_block_half {
width: 48%;
display: table-cell;
}
.colab_page_block_left {
padding-right: 2%;
border: 1px solid red;
}
.colab_page_block_right {
padding-left: 2%;
border: 1px solid blue;
}
.colab_text_padding {
padding-left: 4%;
padding-right: 8%;
}
.colab_image {
overflow: auto;
max-width: 100%;
max-height: 100%;
}
.colab_bottom {
vertical-align: bottom;
}
.colab_top {
vertical-align: top;
}
.colab_margin_bottom {
margin-bottom: 3.5em;
}
And here's a link to the JSFiddle:
https://jsfiddle.net/twestfall/Lbqfo40u/4/?utm_source=website&utm_medium=embed&utm_campaign=Lbqfo40u

Answer 1

Change the CSS for .colab_image to:
.colab_image {
overflow:auto;
width: 100%;
height: auto;
}
Here's a working JSFiddle.