如何使空跨度塌陷

Question

我正在使用this fiddle 来裁剪和居中图像。它工作得很好，但我需要包装div.test 具有与image 相同的宽度。这是不可能的：如果我将img 的width 设置为300px，魔法就不起作用。我认为这是因为span 我用来使图像居中。我认为它留下了一种空间footprint（也许是字母或单词之间的空间？）。 那么：如何让它的空间效果“隐形”？

更新

我最初的目的是：水平调整图像大小并垂直裁剪和居中+与 IE8 的兼容性>。全部用 CSS 完成。上面链接的解决方案几乎接近解决方案，但并不完美（左侧的小空间）。这就是我要求修复它的原因。

Answer 1

如果我理解您的困境，我并不肯定，但是，我认为您可能正在寻找这样的东西。这是 JSFiddle (http://jsfiddle.net/bUrmK/2/) 的链接。

HTML：

<div class="test">
    <div class="before">
</div>

CSS：

.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')";
}

Answer 2

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

HTML

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

CSS

.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;
}