如何製作一個空跨度摺疊

我有this fiddle我正在播放和裁剪圖像。它工作得很好，但我需要包裝div.test具有相同的寬度image。這是不可能的：如果我將img的width設置爲300px魔術不起作用。我想這是因爲我用span來居中圖像。我認爲它留下了一種空間footprint（也許是字母或單詞之間的空格？）。所以：如何讓它的空間效果「隱形」？如何製作一個空跨度摺疊

更新

我的最初目的是：水平調整圖像的大小和作物和中心垂直地從+ IE8兼容性>。全部用CSS完成。上面鏈接的解決方案几乎接近解決方案，但並不完美（左側的小空間）。這就是爲什麼我要求修復它。

來源

2013-10-13 Bertuz

你有什麼想用這個'span'技術與一些更嘗試和真正的理由嗎？（http://stackoverflow.com/a/11552460/949328） – hiattp

有趣！但我需要水平調整它並垂直裁剪。我認爲您建議的鏈接僅適用於垂直和水平方向裁剪的情況。對？ – Bertuz

好吧，我試圖讓你的最終目標感，你想圖像匹配div的寬度，但從頂部和底部裁剪，對不對？這是否會這樣做？ http://jsfiddle.net/8TkME/5/ – hiattp

如果我理解你的困境，我並不積極，但是，我認爲這樣的事情可能就是你正在尋找的東西。這裏是鏈接到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-13 19:27:41

真的很酷和整潔的解決方案！但它不符合我需要的IE 8 https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#Browser_compatibility – Bertuz

已更新原始文章併爲您提供了必要的修補程序。你現在應該全部設置。 –

完美！我可以問你在哪裏可以找到關於ms過濾器的文章/文檔嗎？他們似乎是很多CSS3 IE兼容性問題的好解決方案！ – Bertuz

我現在得到它，你可以使用一個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-13 19:40:49 hiattp

，這個解決方案是完美的，但我需要它與IE8兼容。 – Bertuz

如何製作一個空跨度摺疊

回答

相關問題