更新

Question

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

更新

我最初的目的是：水平调整图像大小并垂直裁剪中心+从IE8＆gt;兼容性。全部用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;
}

如何使空跨度崩溃

更新

2 个答案: