css - 如何使空跨度折叠

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