Html css：如何强制图像以相同的比例缩放？

我有一个带有两个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 
{
   display:flex;
   flex-wrap:wrap;
}


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

从css中删除“显示：表格单元格；”

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


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

---

提供一个呈现html和css的工作示例，我们无法修改此代码，这意味着很难调试和识别问题。阅读：你可以用这些图像作为背景，并将它们设置为覆盖。也许这可以解决差距问题：）因为使用title属性和鼠标悬停css背景图像不是一个选项。提供一个带有呈现html和css的工作示例，我们无法修改此代码，这意味着很难调试和识别问题。阅读：你可以用这些图像作为背景，并将它们设置为覆盖。也许这可以解决差距问题：）因为使用了标题属性和鼠标悬停css背景图像是不可选择的。我不得不做更多的调整，但你的显示弹性提示给我指出了正确的方向，谢谢！我不得不做更多的调整，但您的显示弹性提示为我指明了正确的方向，谢谢！