css：如何強制圖像以相同的量進行縮放？

但是，當我調整瀏覽器窗口的大小時，圖像開始縮放（這不是一件壞事），並開始在第二行圖像之間獲得空白。

有沒有辦法強制圖像無邊距縮放？

我的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; 
    } 
    }

來源

2016-07-07 StandardNerd

提供渲染HTML和CSS工作的例子，這個代碼是不能由我們來修改，這意味着將很難調試，並找出問題所在。閱讀：http://stackoverflow.com/help/how-to-ask和http://stackoverflow.com/help/mcve –

您可以使用圖像作爲背景，並將其設置爲覆蓋。也許這可以解決差距問題:) –

因爲使用title屬性和鼠標懸停css background-image不是一個選項。 – StandardNerd

刪除「顯示：表細胞;」從你的CSS

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


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

http://autoprefixer.github.io/

來源

2016-07-07 10:46:54

我不得不做一些更多的調整，但你的顯示器柔性提示指向我正確的方向，謝謝！ – StandardNerd

好看！別客氣。 –

css：如何強制圖像以相同的量進行縮放？

回答

相關問題