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

2019年8月4日 178次阅读

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

谢谢

最佳答案 你没有设计图像本身,而是设置内部图像的容器div.如果你从.img更改CSS的选择器,它将img类的元素定位到img(注意缺少的点),你将定位所有图像.

或者,如果您想要更具体,可以通过调用img.myClass将其添加到具有特定类的所有图像,该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;
}​
点赞