css：画像を同じ量で拡大縮小する方法

Question

私は、各行の間に余白がない2つの画像のリストを持っています。

しかし、ブラウザウィンドウのサイズを変更すると、画像が縮尺されて（悪いことではない）、2行目の画像間に余白ができます。

イメージに余白を付けずに拡大表示する方法はありますか？

マイ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/