Css 向调整大小的照片添加边框

我正在学习用css设计照片的样式。我将照片居中，但通过将原始尺寸减半来调整其大小时，左右边框不会环绕图像。边框的顶部和底部是正确的

我还没有找到任何关于类似问题的教程或回复，我将非常感谢您对解决此问题的想法

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

示例网站位于。 使用了指向完整样式表的链接，图像属性位于最底部

---

谢谢

您已将边框添加到图像周围的div中，而不是图像本身，这就是问题所在

一种修复方法是添加以下内容：

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

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

---

您不是在设计图像本身的样式，而是在其中包含图像的容器div。如果您将CSS的选择器从

.img

更改为

img

（注意缺少的点），您将以所有图像为目标

或者，如果您想更具体一些，可以通过调用

img.myClass

将其添加到具有特定类的所有图像中，该类将针对所有具有该类的图像

myClass

尽管我建议您不要使用

.img

作为类名，因为它可能会让人混淆

更新

这里是一个完整的代码示例，没有来自其他类和元素的所有混乱。 你可以在这里观看现场演示

HTML

---

谢谢你的反馈@Juan。谢谢你教我这个目标是如何不同的。但是，现在它根本不显示边界。我将.img调整为更具描述性的.centerphoto，并将这些更改保存到。你有没有想过是什么原因造成的？非常感谢你的帮助！我现在明白了，我期待着使用JSFIDLE进行练习。感谢分享此资源和您的链接。

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

.centered{
    text-align:center;
}

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