I'm trying to put an image inside a div of the same dimension but for some reason the image keeps appearing to right of the div even though it's inside the div in my html:
<div>
<img width="16" height="16"></img>
</div>
I created a JSfiddle that shows what's going on: https://jsfiddle.net/5q0s3y1j/
Can anybody help me understand how to put the image inside the div?
The issue is with left: 20px; in your .userFlair css. It's telling the image to shift 20 pixels left from the start of the container, which is larger than the container itself.
Changing this to left: 0; or omitting it completely will put the image in the div.
Here's an updated fiddle.
Remove the left: 20px on your image class.
.userFlair {
position: absolute;
bottom: 50%;
// left: 20px;
transform: translateY(50%);
}
See updated fiddle: https://jsfiddle.net/5q0s3y1j/2/
You don't need to position your img separately. You can simplify your code to just this css.
.lobbyFlair {
border: 1px solid red;
height: 16px;
width: 16px;
display: inline-block;
position: relative;
}
<div class="lobbyFlair">
<img class="userFlair" width="16" height="16" src='http://66.media.tumblr.com/avatar_2dde66f8a62c_16.png'/>
</div>
Related
So I made a website which is working fine (http://hltvnewsgenerator.com/previewavatar/) however when I change the resolution of the window myself, It moves image to some undesired position.
I want to know how can I bind image to a specific position even when the window is getting resized.
My code:
HTML:
<img :src="image" id="steamprofile">
CSS:
#steamprofile {
width: 166px;
height: 166px;
position: absolute;
z-index: 1;
left: 487px;
top: 463px;
}
Problem is that you use position: absolute and then specify exactly where the bananas are supposed to be position. This will of course break the design for all other resolutions than the one you are testing for.
You could wrap the images inside a div (or any other element), this way the absolute positioning will be relative to that div (the div that is wrapping the img). What I would do is to put the background image as a background image for a wrapping div, then put the banana image inside that div and keep the absolute positoning:
div {
background-image: url(https://i.ibb.co/2Kjvf6f/steam-Profile.png);
width: 977px;
height: 226px;
}
div > img {
position: absolute;
left: 487px;
width: 166px;
height: 166px;
}
<div>
<img src="https://bananagaming.tv/images/bananagaming_logo.png">
<div>
Here is my solution, paste this into you HTML, you gotta put css externally by yourselt.
<div style="position: relative">
<img src="steamProfile.png" alt="img">
<img src="https://bananagaming.tv/images/bananagaming_logo.png" id="steamprofile" style=" left: 110px; top: 23px; "></div>
I have an image inside of a div to put a button on the image. I've searched around the web but can't find any way to center the image.
I've tried making it it's own class and centering the img tag itself, but none of them seem to work.
<div class="container">
<img src="https://cdn.discordapp.com/avatars/543553627600584735/470015f633d8ae88462c3cf9fa7fd01f.png?size=256" alt="utili">
Utili
</div>
The image should be centered in the middle of the page, so I can line up 3.
In HTML:
<img src="paris.jpg" alt="Paris" class="center">
To center an image, set left and right margin to auto and make it into a block element:
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
So, you can center any image while its inside a div. I hope this might help you.
You could position the .btn absolute to the relative container. If you know the size you want your image, even better.
How I would attempt to achieve it:
.container {
position: relative;
height: (the height of your image);
width: (the width of your image);
}
img {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
}
.btn {
position: absolute;
bottom: (however far you want it from the bottom in pxs - so lets say 10px);
left: 50%;
transform: translateX(-50%);
z-index: 2;
}
I want to put a link on an image. I did it on other pictures aswell and it works properly. Just on that image the link is only clickable below the actual picture.
here is my code:
HTML:
<a href="admin.php">
<img src="steak.png" alt="AdminSteak" class="wrapSteak">
</a>
and CSS:
.wrapSteak {
position: relative;
top: 15px;
left: 45px;
height: 50px;
width: 25px;
}
Anyone knows a solution why the link isn't directly on the image?
Thanks in advance.
Assigned wrapSteak to the parent element a and make it as inline-block.
.wrapSteak {
position: relative;
top: 15px;
left: 45px;
display: inline-block;
height: 50px;
width: 25px;
}
<a href="admin.php" class="wrapSteak">
<img src="steak.png" alt="AdminSteak">
</a>
This should work. making anchor tag inline-block contains the image tag and if you applying position relative on image tag leaves anchor tag to its original position and the only image will be moved.
let's say I have to place an image RIGHT in a proper spot, but I need its CENTER to be in that spot. I wanted to place an image in the top-left corner of a div, so I placed the image in the div, gave position: relative to the div and position: absolute to the image then set its top and left values to 0. It quite worked but I'd need the CENTER of that image to be right over the top left corner. I'd do it manually setting top: -xpx, left: -ypx BUT I don't have any specific value for the image size (which could vary a lot).
So is there any way to say something like: position: absolute-but-i'm-talking-about-the-center; top: 0px; left: 0px;?
Thank you very much indeed!
Matteo
You could use javascript yo get the size of the image and then set the css left value needed.
Be mindful of the way images are loaded though as they are asynchronous so will not necesserily be available when the document is ready. This means that unless you handle the images correctly you will end up with width and height dimensions of 0.
You should wrap the image in another block element and put a negative left position to the image.
Something like this:
<div id="something">
<div class="imagewrap">
<img>
</div>
</div>
Then give #something a relative position, .imagewrap an absolute, etc... And img should have a relative position with left:-50%. Same for the top.
have you tried;
name_of_div_with_image {
display: block;
margin-left: auto;
margin-right: auto }
give that a go.
No need to use Javascript, this can be done in CSS.
The required HTML: (you must change the div to an img obviously)
<div id="container">
<div id="imgwrapper">
<div id="img">Change this div-tag to an img-tag</div>
</div>
</div>
The required CSS:
#container
{
position: absolute;
left: 200px;
top: 100px;
height: auto;
overflow: visible;
border: 2px dashed green;
}
#imgwrapper
{
position: relative;
margin-left: -50%;
margin-top: -50%;
padding-top: 25%;
border: 2px dashed blue;
}
#img
{
display: block;
width: 200px;
height: 100px;
border: 2px solid red;
}
Click here for a jsFiddle link
The margin-left: 50%; obviously works when using the container div, because the width of the container will be exactly that of the content. (You might need to add width: auto;)
But margin-top: -50%; will not work because the height of the container div will change with it, thus you need yet another wrapper div in which you use this margin-top: -50%; and then you need to fix this error it makes by using a positive percentage based padding. Obviously there may be other solutions to fix this, but the solution should be something like this.
Probably one of the simplest solutions is to place the image in the upper left corner at position
left: 0px; top: 0px; and then use translate to move its center to this position. Here's a working snippet for that:
#theDiv {
position: absolute;
left: 100px;
top: 100px;
background: yellow;
width: 200px;
height: 200px;
}
#theImage {
background: green;
position: absolute;
left: 0px;
top: 0px;
transform: translate(-50%, -50%);
}
<div id="theDiv">
<image width=31.41 height=41.31 id="theImage"></image>
</div>
alt text http://img190.imageshack.us/img190/7514/unbenanntax.jpg
This is what I want to do. A Div with some text in it and on the right bottom corner a img. The hight of the div is stable at 24px but the length is not known and there could be more than one of this divs In a row.
There are a couple of techniques of doing this. The simplest:
<div class="outer">
<img src="....">
</div>
with
div.outer { position: relative; height: 24px; }
div.outer img { position: absolute; right: 0; bottom: 0; }
Now that takes it out of the normal flow, which is a problem is you want other content to wrap/float around it. In that case you really need to know the height of the image and then apply appropriate tricks depending on what you've got.
Start with Making the absolute, relative.
If the image is 10 pixels high, for example, you could try this:
div.outer { height: 24px; }
div.outer { float: right; margin-top: 14px; }
Of course 14px comes from 24px - 10px. I don't know if that will satisfy what you're trying to achieve however.
Background image is your solution.
<div class="blarg" style="background:url(image.gif) bottom right no-repeat">Content</div>
You may need to adjust paddings of the div, too, so the contents of the div doesn't overlap your picture, if this is needed.
If you want to float the text around the image, both of those answers are wrong. Both will make the text go right over the image. I have been looking for hours and no real answer appears to exist. This article more clearly explains why both of those answer will not work if your attempting wrapping the text.
<div class='main'>
<div>...</div>
<div>...</div>
<div class="img-div">
<img src="....">
</div>
</div>
div.main {
height: 1164px;
width: 900px;
}
div.img-div {
position: absolute;
top: 1084px;
left: 817px;
margin: .75rem;
}
Assuming dimensions of the image are 57*55
Only for positioning an image at the bottom right corner:
I have "Div" and image in the div and small image in the bottom right corner of the div.
Detailed:
https://jsfiddle.net/ez08vL7w/
<html>
<head>
</head>
<body>
<div style=" position:relative; display: inline-block">
<img style="width: 100px; height: 100px; position: absolute; z-index: 4; bottom: 50px; right: 30px; "
src="http://images.unsplash.com/photo-1529736576495-1ed4a29ca7e1?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max"/>
<a href ="" target="_blank">
<img src="https://media.gettyimages.com/photos/tiger-portrait-picture-id949472768?s=612x612"/> </a>
</div>
</body>
</html>
Simplified:
<div style=" position:relative; display: inline-block">
<img style="width: 100px; height: 100px; position: absolute; z-index: 4; bottom: 50px; right: 30px; "
src=""/>
<img src=""/>
</div>