CODEWITHSUNDEEP
htmlcssimagealignmentborder
Mister_Fix
Mister_Fix

Reputation: 73

Images overflowing their border

i am working on an image hosting website, and for some reason the images in the gallery overflow their maximum width border 

max-width: 495px;

full CSS: 

    .imagebox{
border: 1px solid gray;
height: 495px;
width: 495px;
background-color: #ffffff;
text-align: center;
line-height: 495px;
}
.image_container img {
vertical-align: middle;
max-width: 495px;
}

screenshot of how the overflowing images look: Screenshot Screenshot enter image description here Also, anyone has any tip on how to remove those annoyimg default image borders? Thank you for taking the time on reading my post, any help will be gladly appriciated.

Upvotes: 0

Views: 136

Answers (3)

OriShuss
OriShuss

Reputation: 269

I think the problem is the picture's border. The picture's width is 495px, as you set, but it's right border goes over the max-width and the left border pushes the image even more to the right. If the border is 1px, make the pic's width to 493px.

About how to remove them, I don't understand your question because you set the border to "1px solid gray". try setting "border:0;".

Upvotes: 1

cardern
cardern

Reputation: 725

Have you tried reducing the max-width slightly to see what happens? (Maybe to 485px) For removing the borders, I am not sure how many images you are working with but you could always go the old-fashioned route - open it up in an image editing program and downsize it from there :)

Upvotes: 1

Muhamad Serawan
Muhamad Serawan

Reputation: 445

You can remove image border in css img {border:none, outline: none;}

Upvotes: 2

Related Questions