html - css:如何强制图像以相同的比例缩放？

Question

我有一个包含两个 s 的图像列表，每行之间没有边距。

但是当我调整浏览器窗口大小时，图像开始缩放(这不是一件坏事)并开始在第二行的图像之间留出空白。

有没有办法强制图像无边距缩放？

我的 HTML:

        <ul class="staff-photos">
          <li>
            <%= image_tag("footer/kevin_willy.jpg", alt: "Kevin Willy", title: "Kevin Willy") %>
          </li>
          <li>
            <%= image_tag("footer/marc_willy.jpg", alt: "Marc Willy", title: "Marc Willy") %>
          </li>
          <li>
            <%= image_tag("footer/markus_gygax.jpg", alt: "Markus Gygax", title: "Markus Gygax") %>
          </li>
          <li class="first-row-last">
            <%= image_tag("footer/sabine_gygax.jpg", alt: "Sabine Gygax", title: "Sabine Gygax", class: "first-row-last") %>
          </li>
        </ul>
        <ul class="staff-photos">
          <li>
            <%= image_tag("footer/edith_hansmann.jpg", alt: "Edith Hansmann", title: "Edith Hansmann") %>
          </li>
          <li>
            <%= image_tag("footer/christine_jean.jpg", alt: "Christine Jean", title: "Christine Jean") %>
          </li>
          <li>
            <%= image_tag("footer/angela_widmer.jpg", alt: "Angela Widmer", title: "Angela Widmer") %>
          </li>
          <li>
            <%= image_tag("footer/andrea_schneider.jpg", alt: "Andrea Schneider", title: "Andrea Schneider") %>
          </li>
          <li>
            <%= image_tag("footer/vreni_uhlmann.jpg", alt: "Vreni Uhlmann", title: "Vreni Uhlmann") %>
          </li>
        </ul>

还有我的 CSS:

ul.staff-photos {
    li {
      display: table-cell;
      float: none;
      max-width: 225px;
      max-height: 281px;
    }
    li.first-row-last {
      max-width: 450px;
      max-height: 188px;
    }
    img {
      filter: alpha(opacity = 80);
      margin-bottom: 0;
      margin-top: 0;
      width: auto;
      height: auto;
      opacity: .8;
    }
    img.first-row-last {
      height: 281px;
    }
    img:hover {
      filter: alpha(opacity = 100);
      opacity: 1;
    }
  }

Answer 1

删除“显示:表格单元格；”从你的 CSS

ul.staff-photos 
{
   display:flex;
   flex-wrap:wrap;
}


ul.staff-photos li 
{
   flex:1 0 225px;
}

http://autoprefixer.github.io/