There are tons of questions on SO regarding vertical alignment, but I haven't discovered a clear answer to my problem.
I created a fiddle to show exactly what I'm trying to do.
HTML:
<div id="fade"></div>
<div id="fullscreen">
<img src="http://jira.seraphdevelopment.com/jmajewski/clean/uploads/pictures/n8jvxzd2476480d0.jpg" />
</div>
CSS:
#fade {
/* Cover the entire viewport. */
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
/* Transparent Background */
background-color: #000;
opacity: 0.50;
}
#fullscreen {
/* Cover the entire viewport. */
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
#fullscreen img {
/* Adding the display: block allowed me to center
the image horizontally with the margin: auto. */
display: block;
margin: auto;
/* Limit the size of the image. */
max-width: 80%;
max-height: 80%;
/* This didn't work for me. */
vertical-align: middle;
/* This didn't do anything, either. */
line-height: 100%;
}
I am trying to make a lightbox of sorts, such that the user will click on an image on the page, causing that same image to load up in fullscreen mode. The first div, fade, will be used to cover the entire page with a semi-transparent black background, essentially giving the effect of the page fading away, while also making things modal.
I wanted to be able to nest the image inside the fade div, but I ran into a problem. Setting the opacity on the outer div (to create the fade effect) caused my nested image to inherit the opacity value. Thus, I added a separate div that was identical to the first one, except without the background, and nested the image inside of that.
For the record, I did manage to figure out a workaround to the opacity issue, but I haven't yet implemented it. Credit to Blowski, a SO user who posted this answer to a question regarding opacity:
I do not want to inherit the child opacity from the parent in CSS
The long story short, I have tried quite a few things now in trying to get this image to be centered vertically, but to no avail.
Keep in mind, this solution needs to work with any image!
I am certainly capable of adding a line of code to the $(window).resize() function to center the image manually, but I would like to avoid doing so, if possible. I'm very curious to learn a way around this, as I seem to run into these types of issues more often that I'd like.
Bonus: Why is vertical alignment so difficult for a browser to perform?
Here is one way centering an image in a fixed/absolute positioned div using CSS.
#fullscreen {
/* Cover the entire viewport. */
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
#fullscreen img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
/* Limit the size of the image. */
max-width: 80%;
max-height: 80%;
}
The trick is to use position: absolute for the img and set all the offsets to 0, and then margin: auto will center the image.
The max-width and max-height values will work as expected.
The reason this works is that the image has intrinsic dimensions, so the CSS engine has specific values to do the necessary math to center the images both vertically and horizontally.
See demo at: http://jsfiddle.net/audetwebdesign/KG99S/
Comments
Note that this technique works independently of the overlay.
Also, this works regardless of the aspect ratio of the image.
Reference
This technique follows from the CSS2 specification regarding how the horizontal and vertical margins are determined for absolutely positioned inline, replaced elements.
http://www.w3.org/TR/CSS2/visudet.html#abs-replaced-width
and
http://www.w3.org/TR/CSS2/visudet.html#abs-replaced-height
Related
I am building a component that is supposed to slide up and down depending on some user action. The component must hold an image in the top which is positioned absolute, on a wrapper which is positioned fixed.
Everything is fine and dandy, however during the slide up and down effect, for which I am using jQuery, only the bottom half of the image is shown.
When the animation is over, the image is shown as it's supposed to do.
I have some CSS which looks like:
.wrapper {
background: #fff;
position: fixed;
width: 100%;
bottom: 0;
left: 0;
height: 100px;
display: none;
}
.picture {
position: absolute;
top: -40px;
border-radius: 100%;
left: 50%;
transform: translateX(-50%);
}
I've made a fiddle here: https://jsfiddle.net/7sg3x6zn/
Any ideas on how to avoid this?
As others mentioned, you need to override the overflow: hidden that is set on the callback of both slideDown() and slideUp().
You can do that without changing your stylesheet, if you alter your code like that:
$(function() {
$('#show').click(function(event) {
event.preventDefault();
$('.wrapper').slideDown().css('overflow','visible');
});
$('#hide').click(function(event) {
event.preventDefault();
$('.wrapper').slideUp().css('overflow','visible');
});
});
add
overflow: initial !important;
to wrapper class like the example
https://jsfiddle.net/RACCH/ug7szyzv/
this is happening because the jquery function adds overflow:hidden during the animation..
The animation slideDown, and slideUp uses overflow: hidden on the wrapper element doing the animation.
And because of the negative top position of the images is outside the wrapper. So to avoid the image being cut in half delete the line: top: -40px
Hope this make sense :)
Im trying to get this scrolling effect i have seen on the website http://www.unheap.com , if you scroll to the bottom or to the right you'll notice that you can't scroll past whatsoever. Most website including this one allow you to scroll past slightly with a lot of resistance but I'm trying to replicate the example above where you can't scroll past at all. Anyone know of any plugins or methods on how to go about creating this effect?
The actual website itself is 100% the width and height of the page and any scrolling that occurs is accomplished via an absolutely positioned container with overflow: scroll.
EDIT
The actual overflow is set on the .grid element, which is inside the absolutely positioned .container element.
EDIT #2
The author is also using jScrollPane, but you can prevent the bouncing effect simply by making your body 100% width and height and absolutely positioning a container that has overflow set to scroll.
EDIT #3
See the attached code snippet - (you may have to copy and paste it into it's own HTML file because of the way SO displays snippets). There is no bouncing.
* { margin:0; padding:0; }
html,
body { width: 100%; height: 100%; overflow:hidden;}
body>div { height: 50vh; overflow: auto; padding: 10px; background: #000; position: absolute; width: 100px; top: 100px; left: 100px;}
body>div>div { height: 1000px; background: #0f0;}
<div>
<div>scrollable content</div>
</div>
I've been trying for sometime to replicate an effect seen on this website:
http://www.gregparmasmith.com/
If you play around with the width and height of the window, the images keep proportionate w/h based on their aspect ratio. The images are always loaded with a consistent height, making this slideshow look very nice.
Also notice how wider images (vs thinner images) are resized when just the width of the browser window (not width and height together) is reduced - The images bounce down from the top margin.
He seems to be programming this differently than most responsive jquery image plugins I've seen. There is a parent div container, but it has a static size and seems to not govern the position/sizing of its child images.
Looking at the source, the images top,left,width,height css properties are dynamically being altered.
Any suggestions for how to do this??
The effect seen on that page can be accomplished with just html and css. No javascript needed. He's using percentages as the values for his margins so that as the browser size gets smaller, so does the calculated pixel size of the left and right margins of the div that contains the images. Then by setting the img width to a max-width of a fixed pixel size, say 400px, it will ensure it will only reach a certain width as it does on very large screens.
Then by setting the "width" to a percentage like maybe 100% the image will automatically resize to the size of the containing div because that div is responding the size of the browser.
something like this:
#inside {
max-width: 300px;
margin: 0 auto;
margin-top: 20%;
margin-bottom: 20%;
}
#inside img {
width: 100%
}
http://jsfiddle.net/wRNJ7/1/
I have found a pretty close solution here in this thread:
Vertically center image on page and maintain aspect ratio on resize
Here's a good working demo:
Demo
html, body {height: 100%}
body {
position: relative;
padding: 0;
margin:0;
font-family: sans-serif;
}
.image {
position: relative;
left: 0px;
height: 100%;
background-position: 50% 50%;
background-size: cover;
background-attachment: scroll;
text-align: center;
}
.wrap {
height: 100%;
overflow: hidden;
position: relative;
}
img {
max-width: 70%;
max-height: 70%;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
This effect is achieved without any javascript, which at first I thought was undoable. In this demo, the action of the resizing is a little different. In the original website I was trying to model (http://www.gregparmasmith.com/12), it is "clear" that resizing happens only when necessary, so that for a thin image (ex. 500x100): When the browser window is made as thin, no shrinking would occur. Resizing of the image would occur only if the width of the image would exceed the width of the browser.
In this jsfiddle, I think I can notice this same action is happening, but it's not as obvious.
I have a jQuery slider which needs to be centered in my body; this slider acts as a changing background (fades into one another). I have no overflow problem on my computer (iMac), but on my nexus 7, my body is much wider to fit the whole image. In both cases, I have the latest version of Firefox.
Here's my CSS:
#grosse_photo {
position: absolute;
top: 0;
left: 50%;
margin-left: -552px;
height: 597px;
width: 100%;
max-width: 100%;
z-index: -1;
}
My images are all 1904px wide x 597px high.
I've tried making #grosse_photo relative and absolute position my images from there, but they don't center. I've also tried overflow-x: hidden to all elements (#grosse_photo, body and html) but don't seem to get anywhere.
If it helps any, this is the jQuery animation I'm using:
http://jonraasch.com/blog/a-simple-jquery-slideshow
It has served me well in the past, but this is the first time I'm using it as a background.
Im using a float: right on my website. I want to make that div 100% of the window height minus a 10px margin. I want the height to resize with the page.
I also want the image in it to sit at the bottom of the 'container' minus 10px padding.
I've tried adjusting everything, and am sure its something in the code conflicting but i just can't work it out.
Thanks for any suggestions in advance.
I suggest you use absolute positioning instead of floating for this, you can make elements expand by setting for example top and bottom at the same time.
Absolute positioning could work for the image as well if you set its bottom to 10px (its offset parent will already be the right container, because any position other than the default static makes the element an offset parent).
Quick example:
/* this makes your body take up the whole screen */
html, body { height: 100%; }
/* the positioning magic */
#right { width: 100px; position: absolute;top: 10px; bottom: 10px; right: 20px; }
jsFiddle Demo
​UPDATE: and an updated jsFiddle to show an example on putting another element in the container and positioning it to the bottom.
#image { position: absolute; bottom: 10px; left: 20px; }