为调整大小的照片添加边框答案

【问题标题】：Adding a Border to a Resized Photo为调整大小的照片添加边框
【发布时间】：2012-12-15 17:39:02
【问题描述】：

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

谢谢

【问题讨论】：

标签： css image border

【解决方案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;
}

【讨论】：

感谢您的反馈@Juan。谢谢你教我这个目标是如何不同的。但是，现在它根本不显示边框。我将 .img 调整为更具描述性的 .centerphoto 并将这些更改保存到 nspowers.org。您对可能导致这种情况的原因有任何想法吗？
非常感谢您的帮助！我现在明白了，我期待使用 jsfiddle 来练习。感谢您分享此资源和您的链接。

【解决方案2】：

您在图像周围的 div 中添加了边框，而不是图像本身，这是问题所在。

一种解决方法是添加以下内容：

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

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

【讨论】：