图像溢出边框

Question

我的tumblr博客上的链接类型帖子溢出设置边框的图片存在问题。我已经尝试重新调整图像的宽高比和百分比，但我还没能解决这个问题。对于任何其他帖子类型的图像，这也不是问题。

以下代码我非常确定决定了它的外观。

    .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

对于图像，理想情况下要添加以下CSS规则：

img {
  max-width: 100%;
}

Answer 2

当您将宽度设置为 100% 时，它会占用内容框的宽度。当您没有任何填充或边框时会很好。但是，当您添加边框时，边框的宽度将被添加到 100% 并且会超过 100%，从而导致溢出。因此，要将边框包含在 100% 内，您应该在图像的 css 中设置 box-sizing 属性。

box-sizing: border-box;