Possible to compensate width of image and center horizontal? - css

I have a div with an image inside. I wonder if it possible to place this div 50% horizontal and compansate for half of the image. When I use 50%, the image isn't centered, because of the width of the image. I could use 49% and it looks OK on bigger screen, but on a mobile screen, it's not OK. The image is 100px wide.
Is there a way to solve this?
HTML
<div class="fullscreen-arrow"><img src="wimages/arrow.png" alt="button"></div>
CSS
.fullscreen-arrow {
position: absolute;
left: 50%;
top: 80%;
}

A common trick is to use a negative margin that's half as wide (or high) as your image:
.fullscreen-arrow {
position: absolute;
left: 50%;
top: 50%;
margin-top: -25px;
margin-left: -50px;
}
This assumes that your image is 50 pixels high and 100 pixels wide (and that you know the size of your image beforehand).
Demo (jsFiddle)

Related

Fix top position of div even when div changes size and keep div centered

I have a div that gets taller when a user selects a certain checkbox.
The default behavior of this div was that when the checkbox is selected the div grows equally at the top and bottom. The top becomes higher and the bottom becomes lower. I would like the top of the div to be fixed and only allow the bottom to become lower so that the content of the div that is present regardless of the checkbox state does not move when the user selects or deselects the checkbox.
I found that adding this styling to the div does the trick.
.fixed-top {
position: absolute;
top: 25%;
width: 400px;
}
However, this also moves the div to the left side of the page. I need it to be centered. The div should be a fixed width unless thear window is narrower than that width in which case the div should become narrower.
If I change the position attribute to relative, then the div is centered properly as described above, but the top is no longer fixed.
How can I make the top of the div fixed, while at the same time satisfying the width requirement set forth above?
.fixed-top {
position: fixed;
left: 50%;
text-align: center;
margin-left: -120px;
top: 0;
width:240px;
}
Try this code....
So, this is how I would solve this
First, please make sure the parent element of the div have its own width (in your case, width:100%;) and have any kind of position (e.g. position: relative;) otherwise this trick wont work.
.fixed-top {
position: absolute;
top: 25%;
width: 400px;
// add this
left: 50%;
transform: translateX(-50%);
}
The trick is to set the div's left attribute by 50% of its parent element width, then move (translateX) it back (-50%) by half of the div width.
You can also use this trick on top attribute too.
top: 50%;
transform: translateY(-50%);
or use this to center both top and left
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
EDIT:
If you want the div position attribute to be relative, you can use
.fixed-top {
position: relative;
// instead top, we use margin-top
margin-top: 50px;
width: 400px;
// add this
margin-left: auto;
margin-right: auto;
}
I hope this helps ;)

Scaling a spritesheet in CSS

I'm having an issue where as soon as I use the background-size property, it seems to reduce the size of the background rather than increase it.
div.someelement{
z-index: 100;
position: fixed;
background: url('spritesheet.png') no-repeat;
background-size: 200% 200%;
background-position: 0px 0px;
width: 50px;
height: 55px;
margin: auto;
left: 0;
top: 0;
bottom: 0;
}
I'd expect background-size: 200% 200% to double the scale of the spritesheet. The element in the spritesheet is actually 100px per 110px, and I'm trying to scale it down to this 50x55 box. What am I doing wrong and how can I achieve that?
I also don't care about IE8 compatibility.
Probably your image is larger than 100px.
If the div is 50px, and you set the bakcground size to be 200%, it means 200% of 50px, so your background will have a size of 100px.
If the native size of the image is bigger, then you are shrinking it. Not making it twice bigger.
If the box and the image have the same ration then use background-size:cover; or background-size:contain;
Update after comments
When using percentage values in background size, it is based on the dimensions of the element it is applied. So 200% on a 50px element will make the background image be 100px.
In you case you are better off using actual pixels, and since you want the background to be half its original size just set it to
div.someelement{
/*.. other properties ..*/
background-size: 262px 225.5px;
/*.. other properties ..*/
}
If you want to show a 524x451 size image in its original size, you need to count its scale/size based on the div's size, which will, in your case, be 524/50 = 10.48 (1048%) for its width.
And then, to make the 100x110 fit inside a 50x55 sized div, it has to be half of 1048, 524 (and using the same math for its height will give you 410).
div {
z-index: 100;
position: fixed;
background: url(https://i.stack.imgur.com/BdDOg.png) no-repeat;
background-size: 524% 410%;
background-position: -50px -50px;
width: 50px;
height: 55px;
margin: auto;
left: 0;
top: 0;
bottom: 0;
}
<div>
</div>

How to move the POV of an image when using overflow: hidden?

So after a long time of searching, I finally found out how to crop an image without distorting/squashing an image using overflow: hidden;.
Now my next problem; How would I have the image show a part I want, meaning, when using the overflow:hidden it shows the image from the top of it rather than the middle or bottom. How can I adjust that and show the image from the bottom or middle? To help give a better understanding, please view the images below which I created in photoshop. Image description in order: default image, what css does in default with overflow: hidden, what I want (middle pov), what I want (bottom pov).
Thanks.
Edit: My layout is: parent div with the image div as the child. Parent div's height defined at 600px and width at 100%. And height and width of image div defined as 100%.
Assuming your desired width/height and overflow: hidden is applied to an outer containing div, you can add something like:
.container img {
position: relative;
top: 50%;
transform: translateY(-50%);
}
This would move the displayed area of the image down 50% of the container height (top: 50%), then back up 50% of the image height (transform: translateY(-50%)), which ends up centering it inside the container.
You can adjust these values to achieve different positioning, or add in left: and transform: translateX() to adjust the horizontal axis.
In which way are you using this image?
If you're using this as a background image the solution is much simpler and would simply involve using background positioning. If you're using this as an image pulled in using an img tag you can try the below to manipulate the image.
Be aware that this won't work on every browser.
.new-image-container {
position: relative;
width: 250px;
height: 250px;
overflow: hidden;
}
.new-image-container img {
position: absolute;
left: 50%;
top: 50%;
height: 100%;
width: auto;
-webkit-transform: translate(-50%,-90%);
-ms-transform: translate(-50%,-90%);
transform: translate(-50%,-90%);
}
<div class="new-image-container">
<img src="http://i.stack.imgur.com/j8aQR.jpg"></img>
</div>
Here is my answer/solution for anyone that comes across this post.
#Banner {
width: 100%;
height: 350px
}
#backgroundBanner {
width: 100%;
height: 100%;
overflow: hidden;
}
#backgroundBanner img {
width: 100%;
position: relative;
top: 70%; /*make changes to this and below to adjust the positioning of the image*/
transform: translateY(-70%);
<div id="Banner">
<div id="backgroundBanner">
<img src="https://www.mathworks.com/matlabcentral/mlc-downloads/downloads/submissions/55312/versions/4/screenshot.jpg">
</div>
</div>

Center a div vertically/horizontally resizing it at the same time

As the question says, I am trying to center a div on the middle of the screen both horizontally/vertically and resize it at the same time.
I do not have any problems on resizing the content when the screen is smaller even to center the wrapper when it is displayed on big screens, the problems comes when I try to resize the screen and, as the wrapper has a max-height property, it does not never vertically center when resize the screen (because it occupy 300px all the time).
I would like that the div that is centered (wrapper) never will be more than 300px and will be always centered (both vertically/horizontally).
Here is my code:
HTML:
<div id="wrapper">
<div id="content">
</div>
</div>
CSS:
html{
width: 100%;
}
body{
width: 100%;
background-color: red;
margin: 0;
}
#wrapper{
position: absolute;
max-width: 300px;
max-height: 300px;
width: 100%;
height: 100%;
margin: auto;
top: 0; left: 0; bottom: 0; right: 0;
}
#content{
position: absolute;
width: 100%;
padding-bottom: 100%;
background-color: yellow;
}
JSFiddle.
I tried a lot of configurations and looked a lot of questions here on StackOverflow but any of them worked for me because most of them are only for horizontally/vertically center or resize a div, but not both.
Note: I cannot use flexbox and I would like to maintain as much as possible the actual CSS code, if possible.
How can I avoid to use max-height (that is broken my vertically centering) and get the same behaviour?
EDIT: The div is already centered both vertically/horizontally. What I want is that the square will be always a square and always be centered. I am sorry if I do not put it very clear.
Now the content is being resize as I want (as a square), the problem is only with vertically align at the same time it resizes.
EDIT 2: If you want to see the effect that I refer in the above edit, resize the screen on my example JSFiddle horizontally and you will see the effect.
Thanks in advance!
You can easily do this with CSS3 transform. It depends of the browsers support you want to offer.
I would suggest to place your content absolute at 50% of your wrapper. Then, you can use a negative translate of 50%. top: 50% and left: 50% will place your content top left corner in the middle. Negative translate of 50% (translate(-50%, -50%)) will move your content half of its width to the left and half of its height to the top.
#content{
position: absolute;
width: 100%;
height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
You can see your updated jsfiddle
EDIT
I misunderstood a part of your question the first time. But you can easily merge a part of your solution and mine to get what you want.
You just need to replace height: 100%; with padding-bottom: 100%; of my previous answer above:
#content{
position: absolute;
width: 100%;
padding-bottom: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
See this updated jsfiddle.
Maybe I'm missing something(?), but it looks like you can just add height:100%; to your #content css instead of padding-bottom and it works:
https://jsfiddle.net/puajxgsz/
Also, I played with another way to do it without absolutely positioning anything...because, well, it was sort of interesting:
https://jsfiddle.net/j0ch7oxj/

CSS Footer Fixed Width, Bottom of screen, and centred

I'm an iPhone Developer mainly, I'm a bit rubbish at CSS and I'm trying to make a webpage for my app.
I want to make my footer have the following properties:
Fixed width of 640px
Centered
Attached to bottom of screen, not page. So when the user resizes the window, the footer is always at the bottom
All the other styling I can do myself, it's just positional styling that I find really difficult.
Can someone please explain to me how to do this in just CSS.
footer {
width: 640px;
margin: 0% -320px;
position: fixed;
left: 50%;
bottom: 0%;
}
Example: http://jsbin.com/imisig/3
Example with heaps of text: http://jsbin.com/imisig/4
Put the footer HTML into a <div id="footer">. And the CSS would be something like this:
#footer {
width: 640px;
position: fixed;
bottom: 0px;
left: 50%;
margin-left: -320px;
}
Explanation
The width property sets the width to 640px
position: fixed will make it so it scrolls with the page
bottom: 0px makes it fixed on the bottom of the page (distance to bottom = 0px)
left: 50% puts the left side of the div to the center of the page
margin-left: -320px - now we have to move it 320px from the left to make it centered
.footer{
width:100%;
position: fixed;
bottom: 0%;
}
position: fixed will make it so it scrolls with the page
bottom: 0px makes it fixed on the bottom of the page (distance to bottom = 0px)
The width property sets the width to 100%

Resources