css - 为调整大小的照片添加边框

Question

我正在学习使用 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图像属性在最底部。

谢谢

Answer 1

您不是在为图像本身设置样式，而是为包含图像的容器 div 设置样式。如果您将 CSS 选择器从 .img 更改为它针对具有 class 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;
}​