CSS - <img>標籤的寬度小於圖像文件的寬度。可能在中間對齊？

正如標題所暗示的那樣，我試圖將圖像的源居中放置在它的圖像標籤中。圖片kinda 必須的寬度爲212px，img標籤的寬度爲210px。CSS - <img>標籤的寬度小於圖像文件的寬度。可能在中間對齊？

因此，不是從右側丟失兩個1px柱，是否有可能從左側丟失1個，從右側丟失1個？

在此先感謝。

編輯：我的形象被壓縮，因爲它似乎，不裁剪，這是更糟:)

2012-01-20 magtak

是的，我發佈後的回答是正確的（像往常一樣）。不管怎麼說，還是要謝謝你。解決方案是圍繞div的圖像，較小的寬度，overflow：hidden，圖像位於左側：-1px。任務完成。 – magtak

你可以通過CSS添加邊框：

img { 
    border: 1px solid white; /* or same colour as your site's background */ 
}

或可選擇地把一個包含元素圍繞圖像，例如

<div class="img"><img src .. /></div> 

.img { 
    text-align: center; 
    width: 212px; 
}

2012-01-20 10:55:08 stealthyninja

我會用「text-align：center」來解決第二種解決方案。這將適用於212像素以下的各種圖像尺寸。 – timing

我會建議將圖像標記包裹在div中。然後，您可以設置div來有212px寬然後設置圖像標籤有：

margin: 0 auto;

這行告訴圖像對圖像的頂部和底部0保證金，併爲汽車參數左邊距和右邊距強制瀏覽器將元素居中放置在其包含的元素中，在本例中爲div包裝。

2012-01-20 10:56:17 Kenneth

做到這一點，最好的方法是包含一個div內的圖像：

<div id="image_container"> 
<img id="img" src="/whatever.jpg"/> 
</div>

CSS：

#image_contrainer{ 
width:212px; 
text-align: center; 
} 

#img{ 
width:auto; 
margin:auto; 
}

這可能不準確，但其正確的想法做這樣的東西。只是玩耍，直到它的工作。

2012-01-20 10:57:34 JackalopeZero

回答