存在图像时对齐 div 内的 div

Question

我无法确定此页面的正确 CSS。我想保持响应式设计，以便图像可以根据它们所在的容器重新调整大小。如果你在 Chrome 和 Safari 中查看这个 JSFiddle，它可以正常工作。图像不会在 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

将.colab_image 的 CSS 更改为：

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

这是working JSFiddle。