將邊框添加到調整大小的照片

我正在學習使用CSS來設置樣式。我集中了一張照片，但是當我通過將其原始尺寸減半來重新調整大小時，左右邊框不會環繞圖像。邊界的頂部和底部是正確的。將邊框添加到調整大小的照片

我還沒有找到任何教程或類似的問題的答案，我將不勝感激你的想法解決這個問題。

.img { 
     text-align:center; 
     margin-top:80px; 
     margin-bottom:0px; 
     padding:0px; 
     border:4px solid #F2F2F2; 
     }

示例網站是http://nspowers.org。指向完整樣式表的鏈接是http://nspowers.org/stylesheet/stylesimgquestion.css，圖片屬性位於最底部。

謝謝

2012-12-15 Nathan

你不是造型圖像本身，而有內部圖像的div容器。如果你改變你的CSS從.img它的目標與類元素的選擇img到img（注意漏點），你將瞄準所有圖像。

或者如果你想要更具體一些，你可以通過調用img.myClass將它添加到具有某個類的所有圖像，它將定位所有具有類myClass的圖像。

雖然我建議你不要使用.img作爲類名，因爲它可能會令人困惑。

更新

下面的代碼的一個完整的例子，而不受其他階級和元素的所有混亂。您可以在此fiddle

HTML

<div class='centered'> 
<img src='http://nspowers.org/excomm_photo.jpg' height="251" width="380"/> 
</div>

CSS

.centered{ 
    text-align:center; 
} 

.centered img{ 
    border:5px solid blue; 
}

2012-12-15 03:10:05

感謝您的反饋@Juan觀看現場演示。謝謝你教我如何以不同的目標。但是，現在它根本不顯示邊框。我將.img調整爲更具描述性的.centerphoto，並將這些更改保存到http://nspowers.org。你有什麼想法可能會導致這種情況？ – Nathan

@Nathaniel：檢查更新;） –

非常感謝你的幫助！我現在明白了，我期待用的jsfiddle練習。感謝分享這個資源，你的鏈接。 – Nathan

您已經添加邊框周圍的圖像股利，而不是圖像本身，這就是問題所在。

一種解決方法是添加此：

.img { 
    text-align:center; 
    margin-top:80px; 
    margin-bottom:0px; 
    padding:0px; 
} 

.img > img{border:4px solid #F2F2F2;}

2012-12-15 03:09:13 daniel

回答