I am getting some strange behaviour aligning images within a border on Chrome (Version 93.0.4531.2) and Edge (Version 91.0.864.37) on desktop (Windows 10 20H2, macOS Big Sur 11.3.1). This is not an issue on mobile.
Please refer to the images to see the small gaps. It is very temperamental, since on some cards these appear on the left side, on others on the top, on some on both and on others not at all.
So far I have tried (in various permuatations):
margin: 0
padding: 0
display: block
vertical-align: bottom
vertical-align: top
vertical align: -webkit-baseline-middle
My zoom is set to 100%. Here is the code for my most recent attempt. I am using Vuejs for this project.
vue template:
<div class="card">
<img v-if="image" :src="image" :alt="name" />
</div>
base.scss
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
component scss:
.card {
width: 240px;
margin-bottom: 25px;
img {
width: 240px;
height: 240px;
vertical-align: -webkit-baseline-middle;
object-fit: cover;
border: 1.5px solid black;
}
}
See the behaviour live here: https://www.sableradio.live/shows. Any help would be greatly appreciated, thanks in advance.
you can solve this by simpley remove float number from border css property like this for reff. attaching image screenshot
.card {
width: 240px;
margin-bottom: 25px;
img {
width: 240px;
height: 240px;
vertical-align: -webkit-baseline-middle;
object-fit: cover;
border: 1px solid black;
}
}
I was facing this issue recently.
Although I cannot figure out the root of the problem, I discovered some tricks which you may consider:
setting a background to container, let the bg-color blend into the gap
.card {
background-color: black;
}
OR
negative margin to your photo
img {
margin: -1px;
}
Not pretty, but it works for me.
Related
Hi I m having trouble with a tumblr theme code that I want to use.
The problem I'm having with it is that some posts with images are overflowing and also it seems the page is slow for some reason? (I am not a coder in the slightest and any help would be amazing!)
The pastebin is here
#entries {
position: relative;
padding: 15px;
border: 1px {select:border} {color:border};
width: {select:post size};
margin: 30px 5px 20px 650px;
background: {color:post bg};
and here is a [link][2] to a page that has an example of what I am talking about
Put this in your css:
img {
display: block;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
This should make images maintain their aspect ratio, and also fit inside the parent element.
I have an svg img I got from thenounproject.com (don't worry, I have a place on my site where I give credit to the creators of the images) which I have inside a div. I have set the CSS of the div to have overflow: hidden; however the img is stickout out of the bottom, changing the height of the containing div above the div the svg img is contained it.
Here is the photo of the end result so far (the blue overlay is the <img> object being viewed with firebug so you can see how it is sticking out beyond the white div containing it)
the code I have is:
HTML
<div class="dropdown">
<div class="box edit"><img src="../media/gear.svg"/></div>
</div>
CSS
.dropdown .box{
width: 32px;
height: 32px;
padding: 5px 0px;
margin: 0px 4px;
display: inline-block;
background-color: white;
overflow: hidden;
font-size: 1em;
font-weight: bold;
text-align: center;
border: 1px solid transparent;
border-radius: 2px;
cursor: pointer;
}
.box.edit{
float: right;
padding: 0px;
}
I'm trying to get it so that the "blueish" overlay in the photo, which represents the svg img, does not extend beyond the white box
UPDATE
Thank you all for your answers. I though I would update this to narrow down my question now that I have gotten your feedback. I've tried removed float: right; and the other ideas (remove the border: 0px solid transparent;) but, while helpful, they did not solve the problem.
I currently have transform: rotate(90deg); applied to .box.edit so that way at least the overflow is inline with the rest of the .dropdown bar.
I've tried max-height: 100% and width: 100%; height: auto; etc. but that does not solve my problem. I do not need the entire svg in the box, only what you can see in the photo above (the gear). The part below that has copyright bit from thenounproject.com (see my above statement, I am still following their rules on using photos).
I don't know if I will need to edit the svg file or what, but I was trying to use overflow: hidden; to cut off the end bit (so it does not affect my spacing).
Thank you for your assistance so far.
try this remove border
.dropdown .box{
width: 32px;
height: 32px;
padding: 5px 0px;
margin: 0px 4px;
display: inline-block;
background-color: white;
overflow: hidden;
font-size: 1em;
font-weight: bold;
text-align: center;
/*border: 1px solid transparent;*/
border-radius: 2px;
cursor: pointer;
}
Remove the float from .box and use display: inline-block instead
Hi he is working and now you can define your img css width and height 100% as like this
.dropdown .box > img {
vertical-align: top;
width: 100%;
height: 100%;
}
.dropdown .box{
width: 32px;
height: 32px;
padding: 5px 0px;
margin: 0px 4px;
display: inline-block;
background-color: white;
overflow: hidden;
font-size: 1em;
font-weight: bold;
text-align: center;
border: 1px solid transparent;
border-radius: 2px;
cursor: pointer;
}
.box.edit{
float: right;
padding: 0px;
}
.dropdown .box > img {
vertical-align: top;
width: 100%;
height: 100%;
}
<div class="dropdown">
<div class="box edit"><img src="http://i.stack.imgur.com/8wc74.png"/></div>
</div>
So unless I am reading this wrong the height and width attribuite would work wouldn't it?
Code would be like this and then you would just adjust the height and width according to what you would need..
<div class="dropdown">
<div class="box edit"><img src="../media/gear.svg"/ height="42" width="42"></div>
</div>
As of now your image height is exceeding more than the height of its container due to which it is showing overlay going out of its container. Well applying max-height:100%; to image will make your image to stay within it's parent container, so give it a try.
I have finally found what the problem was with this:
Upon further research, I found that a <svg> has an attribute called "viewBox," which controls how much of the <svg> is shown. The <svg> I was using had a viewBox setting of "0 0 100 125," which basically means the width of the <svg> was 100 and the height 125. Upon finding this, and reducing the height to 100, the <svg> became a proper square and did not stick out further than it's containing div.
Thank you everyone for your answers, a lot of them were good and helpful.
Still developing my html5/css3 mobile site, I have trouble adjusting the height of a div to its parent.
http://jsfiddle.net/1eg2cwLs/
The fiddle doesn't exactly look like this because I'm using webfonts (saved offline though as I'm not going to have internet connection on the target system). But the problem remains the same.
You might be seeing what the problem is right from the spot, if not: I would like the green and red bar (.itemclass) always have the same size as the content of its parent (.item).
Depending on font, its size (still playing around with it) and the overall height of each item, I have to precisely adjust the negative margin. Otherwise it looks like in the screenshot. The negative margin I just mentioned is in the CSS-class .itemclass: (marked with an arrow also in the fiddle)...
.itemclass {
height: 100px;
width: 50px;
background-color: #27ae60;
vertical-align: middle;
text-align: center;
color: white;
font-size: 2em;
margin-top: -27px; /* <=== */
display: inline-block;
}
This cannot be the solution. I tried a lot of stuff and I only got it "working" the way I mentioned.
Any better idea how to make it look clean without a hack?
As well, tips for other improvements regarding my html/css are well appreciated.
Sorry for appending the entire code into the fiddle. I don't know whether it was representative if I was going to remove stuff.
Best regards
I'd probably go this route:
.item {
position: relative;
...
}
.itemclass {
position: absolute;
top: 0;
bottom: 0;
...
}
.itemcontent {
margin-left: 50px;
...
}
Demo
Really big font demo
Consider a reasonable min-width for the body to prevent .tagline from overlapping, etc.
You can set .item's margin-top to 0, and instead adjust the margin-top of .vcenter:before. This way you're just adjusting the text and not the div.
Or you could drop the static height and width of .itemclass altogether. Now the .itemclass will scale.
http://jsfiddle.net/1eg2cwLs/5/
.item {
width: 100%;
height: auto;
background-color: #eeeeee;
border-bottom: 1px solid #cccccc;
overflow: hidden;
}
.itemclass {
height: 100%;
width: auto;
background-color: #27ae60;
vertical-align: middle;
text-align: center;
color: white;
font-size: 2em;
margin-top: 0;
display: inline-block;
}
As a fallback, you can set .item to not show overflow, and then adjust the line-height of :
.item {overflow:hidden}
overflow: hidden; is your best friend in this case! It hides any overflow content from view outside of .item
Add it into .item {} declaration.
http://jsfiddle.net/1eg2cwLs/1/
I'm working an a site and experiencing a weird issue with an image in a block element. When placing this image in a block, with all the padding and margins set to 0, there still as a space underneath the image. Here's the code:
<section class="page-block">
<div class="wrapper">
<img src="http://navelpluisje.nl/theme/navelpluisje/images/ik.png"/>
</div>
</section>
.page-block {
position: relative;
background: red;
margin: 0;
padding: 0;
}
.wrapper {
position: relative;
width: 200px;
margin: 0 auto;
padding: 0;
}
img {
width: 200px;
background: white;
}
I've created a jsFiddle overhere with the problem.
I've tested it on windows and osx on several browsers and they all have the same issue.
Does anyone know where this comes from?
Thanx
You need to set the vertical-align top as demonstrated in the following JSFIDDLE.
img {
width: 200px;
background: white;
vertical-align:top;
}
Truth be told, I found this answer with the following SO Question. Which explains the following:
By default, an image is rendered inline, like a letter.
It sits on the same line that a, b, c and d sit on.
There is space below that line for the descenders you find on letters like f, j, p and q.
You can adjust the vertical-align of the image to position it elsewhere.
Its caused by the default display property, inline, of img tag.
You can change it to block to get rid of that white space
img {
display: block;
}
reference for inline-block
Use below CSS Code:
CSS
img {
width: 201px;
background: white;
/* height: 100%; */
vertical-align: bottom;
}
My problem is fairly simple but has me really stumped.
(The RHS pic is the problem!)
I have a thumbnail with the following css:
float: none;
margin-right: 0;
display: block;
and to the right of that I have some text with the following css:
position: relative;
text-decoration: none;
text-indent: 0;
Now this works great! However, when the user resizes the window the text jumps below the thumbnail which I don't want (I'm using a responsive website)! How can I prevent this happening the text behaving like this?
I have been playing around with it for ages and can't solve this problem:(.
You can add float left attribute to your image and span text, and add to a margin left to your text
.box {
width: 210px;
vertical-align: text-top;
display: table-cel
}
.box img {
float: left;
width: 100px;
height: 100px;
}
.box span.text {
float: left;
width: 100px;
box-sizing: border-box;
}
Can you view an example in jsfiddle: here
As per my understanding, the reason might be:
There may be some float left given to the thumbnail image somewhere
inside the style written for lower screen sizes. The best
thing you can do is, inspect using firebug or something and check
whether any float left is given to the thumbnail image. If so, remove that, or give it as
float as none.
If you are ok with having the entire text below the image when the screen is resized, you can make use of clear: both for lower screen size, which has to be given the text div.
If you could give a link to review, it will be easy to tackle the real problem. Hope my solution helps. Thank you :-)
This appears to do what you want:
<html>
<head>
<style>
img {
float: left;
width: 40px;
height: 40px;
border: 1px solid gold;
margin-left: 5px;
}
.text {
margin-left: 50px;
}
.container {
width: 150px;
border-left: 3px solid red;
}
</style>
</head>
<body>
<div class="container">
<img>
<div class="text">This should stay aligned and not go under the thumbnail.</div>
</div>
</body>
</html>