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：如何强制图像以相同的量进行缩放？

回答

相关问题