Выравнивание div в div при наличии изображений

Question

У меня возникли проблемы с определением правильного CSS для этой страницы. Я хотел бы поддерживать отзывчивый дизайн, чтобы изображения изменялись по размеру для контейнера, в котором они находятся. Если вы посмотрите на этот JSFiddle в Chrome и Safari, он отлично работает. Изображения не изменяются в FireFox или IE 11. Большие полные изображения вообще не отображаются на iPad или iPhone. Я не знаю, куда обратиться к следующему.

Вот 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> 

И вот CSS, что у меня до сих пор.

.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; 
    } 

А вот ссылка на JSFiddle:

https://jsfiddle.net/twestfall/Lbqfo40u/4/?utm_source=website&utm_medium=embed&utm_campaign=Lbqfo40u

Answer 1

Изменение CSS для .colab_image к:

.colab_image { 
    overflow:auto;  
    width: 100%; 
    height: auto; 
} 

Вот working JSFiddle.