【问题标题】: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;}
    

    【讨论】:

      猜你喜欢
      • 2015-04-27
      • 2017-01-27
      • 1970-01-01
      • 1970-01-01
      • 2017-06-18
      • 2014-02-13
      • 1970-01-01
      • 1970-01-01
      • 2012-02-12
      相关资源
      最近更新 更多