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.
You can remove image border in css img {border:none, outline: none;}
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 :)
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;".
Related
I would like to draw a border around an image with no visible gap between the image and the border.
img{
display: block;
border: 1px solid black;
}
<img src="https://files.catbox.moe/r099uw.png">
Result of above snippet in Chrome (Version 84):
There is a small gap between the image and the border to the right and below the image.
The answer to this similar question suggests setting display: block on the image, but this does not seem to solve the problem in this case. Based on other answers I have also tried vertical-align:bottom, padding:0, margin: 0; adding width/height, but all to no avail. Increasing the border to 2px gets rid of the gap, but is not an ideal solution.
I tested the above snippet in Chrome, Firefox, and Microsoft Edge. It displays without a gap in Firefox, but with a gap in Chrome and Edge.
How can I create a bordered image that displays consistently without a gap across all platforms?
It appears that adding box-sizing: border-box; as well as a specific height solves the problem in Chrome and Edge.
img{
border: 1px solid black;
height: 16px;
box-sizing: border-box;
}
<img src="https://files.catbox.moe/r099uw.png">
If anybody knows a better solution, or why this is necessary, please let me know.
Edit: This solution is not perfect, as the gap can reappear depending on the position of the image. For example:
img{
border: 1px solid black;
height: 16px;
width: 16px;
box-sizing: border-box;
position: relative;
left: 1px;
}
span{
border: 1px solid red;
}
<span>
<img src="https://files.catbox.moe/r099uw.png">
</span>
Result in Chrome (zoomed in for detail):
You can fix this with css styling. This is what we can do, let's define a css class or id with desired width and height that you would like to have for image. Now use your image as background for defined div or class. Stroke/Border effect can be done by giving border to defined class or id. Once you're done you can adjust your image by making some changes to background-size. That will make you image zoom in or zoom out. So you can easily cover up the gap for any image. Here is the code
HTML :
<div id="image"> </div>
CSS :
#image {
display:inline-block;
width:30px;
height:30px;
border:1px solid #000;
background-image:url(TOn2E.png);
background-repeat:no-repeat;
background-position: center;
background-size: 150%
}
For adjusting image you can make changes to background-size in percentage.
try this:
img {
outline: 1px solid black;
}
<img src="https://files.catbox.moe/r099uw.png">
Also, if necessary, try to append outline-offset, like outline-offset: -1px;
I have a problem with my web design. I have a div class="main-area" containing 2 div's.
div class="half"
div class= "half second-half"
the .half contains text and the .second-half contains a picture. For images I have the following css:
img max-width: 100%;
height: auto;
margin: 0 0 10px 0 ;
but when i scale the browser down, the image scales with the browser but sticks in the vertical middle of the main-area div.
How can i make my second-half div stick to the top of the main div??
I tried margin-top -xxxx px and - xxx% but this does not work since the image scales so the main div scales.
here are images wich show what i mean, hope this helps because i dont know what jsfiddle is and how it works.
i got the link to the jsfiddle down below
http://jsfiddle.net/8zaSy/
i hope this is good enough?
try this
.second-half img { max-width: 100%;
height: auto;
float:left;
marging-top:10px;
}
Please check the code JSFiddle
It seems you just want your image to be aligned top of the page. If this is the issue, then i have added it in the js fiddle above.
#indexpic {
border: 1px dashed grey;
border-radius: 5px;
/*margin-top: 180px;*/
}
If you have any other issue, then please comment, and modify the JSFiddle.
Regards D.
http://mistcave.com/temp/
Zoom into the page and scroll right. The 1px black border at the bottom of the header is cut off a bit short. How do I fix this issue?
put the border bottom property in your header div
also to note if you are using google chrome you can go to select elements and view the dimensions of each div which will help you trouble shoot in the future
Made a dirty hack. Tough it work flawlessly.
Demo Fiddle
#wrap {
width: 100%;
}
#header {
border-bottom: 1px solid #000000;
margin-bottom: -1px;
}
That doesn't really matter. Because the Border-bottom effect follows the size of your browser. No web users would zoom in and out pages except you.
It will also be fine in every screensize, just don't zoom it in and out.
That thing is fine every site has that problem too but it's not a big deal.
set the width of the #wrap in CSS to be 100%
OR simply do the following:
body
{
overflow-x: hidden;
}
.extendfull, .extendleft
{
padding-left: 3000px;
margin-left: -3000px;
}
.extendfull, .extendright
{
padding-right: 3000px;
margin-right: -3000px;
}
overflow-x: hidden prevents horizontal scrolling, and increasing the padding is pretty self explanatory.
I have a background image which i need to display vertically as long as the content on the page, but, my background image only shows to the page in view and when I scroll down for the rest of the content the background is not shown in the rest of the page. What am I doing wrong?
css for the background image
#wrapper {
text-align: left;
margin: 0px auto;
border:0;
width: 960px;
height: 100%;
background-image: url('/images_/backgrounds/content_shadow.png');
background-repeat: repeat-y;
}
Try applying the background-image and background-repeat rules to body instead of #wrapper.
Try adjusting the height property, the 100% is relative to what?
Generally i prefer defining height rules with min-height.
My guess is that the wrapper div isn't extending to the bottom of the content either. Try setting the border of wrapper to:
border: 1px solid black;
You might find that the background is behaving just fine, and the div isn't doing what you want.
Apply the background image styling to html{ } instead.
remove the height: 100%; from css.
i have div take css class
.headbg01
{
background-image: url(../images/header_background01.jpg);
border-left: #cccccc 1px solid;
background-color: #ffffff;
width: 920px;
background-repeat: no-repeat;
height: 160px;
border-right: #cccccc 1px solid;
}
its working great in ie
the problem is the bg image doesn't appear properly in firefox
here is the ie div view
alt text http://img341.imageshack.us/img341/3595/35520026.jpg
and here is the firefox div view
alt text http://img641.imageshack.us/img641/950/31289427.jpg
i don't know whats wrong is it the height or what?
please i need some help
You may need to supply the background-position, try this:
.headbg01
{
background: #fff url(../images/header_background01.jpg) no-repeat top left;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
width: 920px;
height: 160px;
}
try declerating a strict doctype that should do the job
It appears that one browser is stretching the height/width to fill the div without keeping the image's height/width ratio, whereas the other is using the image's dimensions to scale it properly.
Make sure your image and your div have the same dimensions, minus the 2 extra pixels for the left and right border.
EDIT:
After closer inspection, it appears that the top of the second image is being cut off. Try specifying background-position: top left;.