I want to know how to zoom on the center of an image.
I tried different things like imageWrapper.width().left
$(document).on('click', '.process-diagram-zoom-in', function(){
var div = $(this).parents('.container-fluid:first');
var imageWrapper = div.find('.image-wrapper');
imageWrapper.width(imageWrapper.width() * 5.1);
});
Apparently, you already know how to magnify the image, so what you need to do is make sure it's centered inside a container.
This can be done with simple CSS.
For the container:
position: relative;
And for the image:
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
Related
I'm making a game using React.js, and the player element is a simple image with sprite images implemented in CSS:
.player {
position: absolute;
height: 32px;
width: 32px;
object-fit: none;
transform-origin: 50% 50%;
transform: scale(calc(var(--factor) / 2)) rotate(0.02deg);
image-rendering: pixelated;
}
How would I add the translate() function to make the player's top left corner exactly at (0, 0)?
If you want to be all the way at the top, no matter what else is on the page, position it absolute. This ignores everything up to the next highest positioned element That means it has a position other than the default. You can do that like this.
position: absolute;
top: 0;
left: 0;
/// You might need to adjust for your transform here though
oops... just saw that you already had it absolute. You were 90% of the way there.
For this .player needs a wrapped element with position: relative, and we don't need transform-origin or transform styles:
.parentOfPlayer {
position: relative;
}
.player {
position: absolute;
top: 0;
left: 0;
}
I'm making this accordion: https://codepen.io/rafaelmollad/pen/JjRZbeW but the problem is that when I click on one of the accordion item, the content expands and pushes the title up. I noticed that if the accordion is not vertically centered, then I get the result that I want but I need to center it.
I've added this code to the container in order to center it but it doesn't work:
position: absolute;
top: 50%;
transform: translateY(-50%)
If I remove those lines, the form will position on the top of the page and I'll get the result that I want (without the container being in the center of the page)
Update your container class like
.container {
width: 90%;
max-width: 96rem;
margin: 0 auto;
padding: 1rem;
background: #fff;
position: absolute;
top: 50%;
/* transform: translateY(-50%); */
}
i.e remove transform property, it works exactly like you want.
So, I need to position my element perfectly to the center. It displays correctly in fullscreen mode, however when it's not in fullscreen mode, the element is moved slightly down due to the top of the browser (tabs, URL bar, etc..)
I am using this CSS:
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
I have a feeling it's centered relative to the screen resolution? (Which explains why it's centered perfectly to fullscreen).
Here are images of what I mean:
https://i.stack.imgur.com/f63l7.jpg
https://i.stack.imgur.com/xwNfs.png
Is there any way to fix this? I don't mind using HTML/CSS/JS to solve this issue, I can also use JavaScript libraries.
Thanks for any help!
Edit:
My element is inside the body, like this:
<body>
<img class="centered" src="image.png">
</body>
Make use of the vh unit by changing your code like so:
.centered {
position: absolute;
top: 50vh;
left: 50%;
transform: translate(-50%, -50%);
}
You need to set parent to position: relative.
.parent {
position: relative;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="parent">
<span class="centered">I am centered</span>
</div>
there. I was trying to make a hover popup. When my mouse hovers over a table header, a detail explanation will pop up.
However, when I scroll left the table, the popup stays. Is there any way that I can make it stick with the header?
Jsfiddle Link:
https://jsfiddle.net/fmchen/hmaczn87/10/
Some Screenshots:
When scroll left:
I know that I can change the position: absolute; to position: relative; in .CellComment1
However, it will be looking like this:
I added the position: relative; to the field_29 class, then position: absolute; to the span and it worked properly. If you want to be in 1 row then add the span a width: max-content; and for the center align add a margin-left: 50%; and transform: translateX(-50%);
.field_29:hover span.CellComment{ display: block; position: absolute; width: max-content; margin-left: 50%; transform: translateX(-50%); }
.field_29 { position: relative; }
I'd like to make an image viewer that centers an image regardless of how big it is and allows scrolling to view the entire image.
The problem I'm running into is that, while centering images smaller than the container is easy, when they're larger tranform I'm doing positions the image off the right and top of the screen.
Here is the fiddle that has some fixup javascript to make it work: http://jsfiddle.net/d3y0b8bd/
The code below will work for smaller images (e.g. https://upload.wikimedia.org/wikipedia/meta/0/08/Wikipedia-logo-v2_1x.png)
But for larger, the translate(-50%, -50%) transform will translate the image past the left and top margins of its parent.
.lightboxRoot {
position: fixed;
width: 100%;
height: 100%;
overflow: auto;
/*aesthetic*/
background-color: red;
}
.lightboxImg {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
/*aesthetic*/
background-color: blue;
}
html:
<div class="lightboxRoot">
<div class="lightboxImg">
<img id="imgElt" src="http://upload.wikimedia.org/wikipedia/commons/6/65/Cute_beagle_puppy_lilly.jpg"></img>
</div>
</div>
here's a fiddle in which JS is updating the position of scrollTop and scrollLeft, so to set the scroll to center of img.
Figured it out, in retrospect kind of silly: Just make a containing div that can't get any larger than the parent element, and make sure that it has the overflow property set so it gets the scrollbars. then the image inside can get is big as it wants: http://jsfiddle.net/abrady0/d3y0b8bd/2/
.lightboxRoot {
position: fixed;
width: 100%;
height: 100%;
/*aesthetic*/
background-color: red;
}
.lightboxContainer {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
max-width: 90%;
max-height: 90%;
overflow: auto;
/*aesthetic*/
background-color: blue;
}
and the html:
<div class="lightboxRoot">
<div class="lightboxContainer">
<div>
<img id="imgElt" src="foo"></img>
</div>
</div>
</div>
one thing to fix in this case is that I'd still like the div's scroll centered with pure CSS, but this is a good first step.