Reputation: 73
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:
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
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
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
Reputation: 445
You can remove image border in css img {border:none, outline: none;}
Upvotes: 2