CODEWITHSUNDEEP
cssimageborder
Nathan
Nathan

Reputation: 89

Adding a Border to a Resized Photo

I am learning to style photos with css. I centered a photo, but when I resized it by halving its original dimensions, the left and right borders do not wrap around the image. The top and bottom of the border are correct.

I have not found any tutorials or responses for similar issues and I would appreciate your thoughts on resolving this issue.

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

The example website is at http://nspowers.org. A link to the full stylesheet used is http://nspowers.org/stylesheet/stylesimgquestion.css and the image properties are at the very bottom.

Thank you

Upvotes: 4

Views: 141

Answers (2)

Juan Cortés
Juan Cortés

Reputation: 21072

You're not styling the image itself rather the container div that has the image inside. If you change the selector of your CSS from .img which targets elements with the class img to img (note the missing dot) you will target all images.

Or if you want to be more specific, you could add it to all images with a certain class by calling img.myClass which will target all images that have the class myClass.

Although I'd advice you not to use .img as a class name since it can be confusing.

Update

Here's a full example of the code, without all the clutter from other classes and elements. You can view a live demo in this 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;
}​

Upvotes: 2

daniel
daniel

Reputation: 1433

You have added the border to the div surrounding the image, not the image itself, this is the problem.

One way to fix would be adding this:

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

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

Upvotes: 0

Related Questions