I have a specific problem. A website has an image with 5px solid border and when I change Windows scale settings to 125% I see an empty line between image and border.
img {
border: 5px solid red;
}
<img src="https://via.placeholder.com/290x140/000000/FFFFFF/?text=IPaddress.net">
I'm testing it on Google Chrome v91. It looks like Chrome has a problem with subpixels when zooming/scaling.
I have also noticed that this white line is actually a background color of an image where white is probably default.
I have tried many settings but nothing works. Need help.
You can try putting the image in a div, and setting it to 100% like this:
img {
border: 5px solid red;
}
#image {
width: 100%;
height: 100%;
}
<div id=”image”>
<img src="https://via.placeholder.com/290x140/000000/FFFFFF/?text=IPaddress.net">
</div>
Let me know if it works or not. If you want to set the size of the image, change the size of the div.
(for anyone running in to this in the future)
A workaround for this specific problem is to style the background of the parent container the same color as the border.
#image {
background-color: red;
}
If the border color changes on, say, on hover, then change the background color with it.
Related
<div style=" height:0;
width: 0 ;
border: 1px solid black ; ">
This is all the code
And as you can see there is a strange white space inside my div . There should be a perfect black square but there is not . When i run this same code on firefox i get a black square without any empty space inside . As you can see in the image there is no overriding css . I have cleared my cache and set chrome settings to default but it did not worked . PLEASE explain what is happening and also tell whether you have a perfect black square or not .
I tested your code locally and I am not seeing any whitespace inside the div but when I zoomed in on my browser page I can see whitespace inside the div. The solution is for you to reset your browser zoom to normal or 100% in the browser settings to avoid seeing the space apart from that everything is working well.
You are not closing the div tag. What I would suggest is to apply the styles in the css - not as inline styles.
div {
height:0;
width: 0;
border: 1px solid black;
}
<div></div>
I would also question why you have a border on a div that is height and width 0. You can set the styles and apply classes that then shave the div as you want it.
.normal-height {
height: 20px;
width: 20px;
border: solid 1px black;
}
.no-height {
height: 0;
width: 0;
border: none;
}
<div class="normal-height"></div>
<hr/>
<div class="no-height"></div>
As you can see if you remove the height factor we cannot see any of the blank space if you want you can try it out
Hope it will be helpful
<div style=" width: 0 ;
border: 1px solid black ; ">
<\div>
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 an responsive container (Wordpress with visual composer) with a background color and border. If I want the background a little outside the container. (like a offset print error) How to achive this. I have dabbled with background-position. But can't get it to work in WP and dosn't seem to work with negative?
Background and border offset
You could replace border with outline, and use a negative outline-offset value.
*Note that this is not supported by Internet Explorer
div {
background: black;
outline: 5px solid yellow;
outline-offset: -10px;
width: 300px;
height: 300px;
}
<div></div>
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;".
There is a background image on our Magento web site that expands as needed due to the amount of content. It works fine on PCs and (hopefully Macs). But on any iOS device, the white background is not shown.
I have included two screenshots - one of how it looks in a regular PC browser and one showing how it looks on an iPhone. (see next post for the screenshots)
Here is our site: http://tinyurl.com/arfpf7g
Here is a link directly to the image that is not showing up on iOS devices: http://tinyurl.com/bcovmvg
Thanks!!
The problem is that iOS has a limit on the maximum dimensions of images it can load. From memory, it's 3 to 5 megapixels, depending on the device. For reference, Your image is 9.78mp (978 x 10000).
Your background image has absolutely no reason to be that big. It's 171kb and it's repeatable after about 10px. Cut out the top and it could be 10px high and you could achieve the same affect using background-repeat: repeat-y instead. Then simply apply the top of the background to another element.
Alternatively, that background image could be replicated in css using a box-shadow and a dashed border.
CSS:
.outer {
margin: 20px;
width: 200px;
box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.3);
padding: 10px;
}
.inner {
height: 200px;
border: 1px dashed #bde432;
}
HTML:
<div class="outer">
<div class="inner"></div>
</div>
Demo: http://jsfiddle.net/WUpEF/