Alex
Alex

Reputation: 1

Images overflowing borders

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.

enter image description here

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;
    }

Upvotes: 0

Views: 1582

Answers (2)

Khim Bahadur Gurung
Khim Bahadur Gurung

Reputation: 764

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;

Upvotes: 0

mikedidthis
mikedidthis

Reputation: 4897

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

img {
  max-width: 100%;
}

Upvotes: 2

Related Questions