0

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

更新

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

4

2 回答 2

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')";
}
于 2013-10-13T19:27:41.887 回答
1

我现在明白了，你可以使用一个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;
}
于 2013-10-13T19:40:49.223 回答