Images overflowing borders

Question

I'm having an issue with images overflowing the set border for link type posts on my tumblr blog. I've tried re sizing width and height ratios and percentages for images, and yet I haven't been able to fix the issue. This also isn't an issue for images on of any other post types.

Here is the code that I'm pretty sure dictates the appearance of this.

    .post.link .postcontainer{
        padding:0;
        overflow:hidden;
        padding-bottom:5px;
    }

    .post.link .description{
        padding-left:20px;
        padding-right:60px;
        padding-bottom:10px;
    }


    .post.link a.postlink{
        font-family:"Helvetica Neue", helvetica, Arial, sans-serif; 
        font-size:12;
        color:#000;
        font-weight:bold;
        width:428px;
        padding-right:70px;
        display:block;
        padding-top:15px;
        padding-bottom:10px;
        padding-left:20px;
        text-decoration:none;

    }

    .post.link a.postlink span{
        background: url(http://static.tumblr.com/xsp9wak/PHAkloide/icon-linkpost-arrow.png) no-repeat top left; 
        width:35px;
        height:36px;    
        display:block;
        position:absolute;
        right:20px;
        top:50%;
        margin-top:-17px;
        opacity: .7;
        -moz-opacity: 0.7;
    }

    .post.link a.postlink:hover span{
        opacity: 1;
        -moz-opacity: 1;
    }

    .post.link .vialink{
        margin-left:20px;
    }

Answer 1

When you set width to 100% it takes the width of content box. It will be fine when you don't have any padding or border. But, when you add border, then the width of border will be added to the 100% and it will be more than 100% which causes the overflow. So to include the border within the 100% you should set box-sizing property in css of image.

box-sizing: border-box;

Answer 2

For images, its ideally to add the following CSS rule:

img {
  max-width: 100%;
}