Css 如何使空跨倒塌

我有我正在玩的裁剪和中心的形象。它工作得很好，但是我需要包装

div.test

以使

图像的宽度相同。这是不可能的：如果我将
img
的
width
设置为
300px
魔术就不起作用了。我想这是因为我用
span
将图像居中。我认为它留下了一种空间
足迹
（可能是字母或单词之间的空间？）。
那么：如何使其空间效果“隐形”

更新
我最初的目的是：水平调整图像大小，垂直裁剪并居中+与IE8>兼容。所有这些都是用CSS完成的。上面链接的解决方案几乎接近解决方案，但并不完美（左侧的小空间）。这就是为什么我要求对它进行修复。
如果我理解您的困境，我不确定，但是，我认为您可能正在寻找类似的解决方案。这里是指向JSFiddle（）的链接

HTML:

我现在明白了，您可以使用单个
div
：

HTML

<div class="cropped"></div>

您想使用这种
span
技术，而不是更为久经考验和真实的技术，有什么原因吗？有意思！但我需要水平调整，垂直裁剪。我认为你建议的链接只有在你想垂直和水平裁剪时才有效。对吗？好吧，我试着理解你的最终目标，你希望图像与div的宽度相匹配，但从顶部和底部裁剪，对吗？这样行吗？是的，你明白了！但问题是：这个解决方案取决于一个特定的边距值，我想为每个高度找到一个通用的解决方案。我的解决方案是可行的，但它留下了一个“空间”。也许仅仅使用CSW是不可能的，通用解决方案应该做什么？你不清楚目标是什么，因为所有的东西都是硬编码的。你想在一个“通用”解决方案中裁剪多少，从哪里裁剪？真正酷而整洁的解决方案！但它与IE8不兼容，我需要为您更新原始帖子并进行必要的修复。你现在应该准备好了。太好了！请问我在哪里可以找到一些关于ms filters的文章/文档？对于许多CSS3IE兼容性问题，它们似乎是一个很好的解决方案！我会使用MSDN。这里有一个链接可以帮助你。正如斯宾塞甚至建议的那样，这个解决方案是完美的，但我需要它与IE8兼容。
.test {
    background-color: grey;
    overflow: hidden;
    width: 300px;
}
.before {
    background-image: url("http://www.news.giudicarie.com/images/Inaugurazione_Muse_Museo_della_Scienze_di_Trento.JPG");
    width: 100%;
    height: 100px;
    background-position: center;
    background-size: cover;
    /*This will allow for LTE IE-8*/
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.news.giudicarie.com/images/Inaugurazione_Muse_Museo_della_Scienze_di_Trento.JPG", sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=""http://www.news.giudicarie.com/images/Inaugurazione_Muse_Museo_della_Scienze_di_Trento.JPG", sizingMethod='scale')";
}

<div class="cropped"></div>

.cropped{
  background-image: url("http://www.news.giudicarie.com/images/Inaugurazione_Muse_Museo_della_Scienze_di_Trento.JPG");
  width: 300px;
  height: 200px;
  background-position: center;
  background-size: cover;
}