如何为mozilla和chrome优化图像

Question

我正在建立一个网站，我有不同类别的图像，它们通常以铬合金显示（见下图）：

但是，在mozilla中，它们显示如下：

此类别卡的HTML和CSS代码：

＆＃13;

＆＃13;

.category-image{
    width: 100%;
    height: 32%;
    -webkit-height:32%;
    -moz-height:32%;
}
.category-image:hover
{
    box-shadow: 0px 0px 20px black;
}

＆＃13;

<div class = "col-md-6">
  <div class = "category" align = "center">
    <h2 class = "category-header remove-margin-h">PS4 GAMES</h2>
    <a href = "xml/ps_igre.xml"><img class = "category-image" src = "ps-gaming.jpg"></a>			
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我的问题是，如何通过CSS优化这些图像，以便它们可以在两个浏览器上工作？