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。

当图像存在时，对齐div中的div

1 个答案: