The problem is: I have a huge background image and content with those characteristics:
the content is centered with margin: auto; and it has a fixed width
the position of the content is in relation to the image (like it fits in the middle of the image)
this connection is only horizontally (vertical scrolling moves everything around as expected)
This works fine, actually, on desktop devices with position fixed on the background image.
But the problem is: When I resize the window until it's smaller than the content, the content is fixed on the left side, but the background image is still centered, as expected. In this case the connection between both elements gets lost.
I have this JavaScript that does the trick, but this is of course some overhead I want to avoid as it isn't smooth anytime due to the calculation:
$(window).resize(function(){
container.css('left', (body.width() - img.width()) / 2);
});
I also tried things like that:
<div id="test" style="
position: absolute;
z-index: 0;
top: 0;
left: 0;
width: 100%:
height: 100%;
background: transparent url(path) no-repeat fixed center top;
"></div>
But this results in the same issue described above.
Is there any elegant CSS solution for this problem?
Demo
Try it yourself
NOTE
The image size is fixed and known and it never gets scaled by the browser.
Is this working for you? http://jsfiddle.net/wPmrm/24/
HTML
<div class="background">
<div class="content">
CONTENT
<br><br>
This example works fine until you the viewport size gets smaller than this content. After that the image isn't sticky anymore.
<br><br>
And check out vertical scrolling.
<div style="height:1500px;"></div>
END
</div>
</div>
CSS
div.background {
min-width: 740px;
background: url('http://placehold.it/1600x1050') top center fixed no-repeat;
}
div.content {
width: 700px;
height: 2000px;
margin: auto;
padding: 50px 20px;
background: none;
opacity: 0.7;
color: #333;
}
.background should be the wrapper for .content with a centered background and have a minimum-width of the .contents width+padding.
Update from comments:
http://jsfiddle.net/wPmrm/28/
We'll have to use a media-query, so when the width is at max 740px we change the background position. Oh and we set background-attachment to fixed again.
CSS added
#media screen and (max-width:740px) {
div.background {
background-position: -435px 0;
}
}
I don't see why it is -435px ((1600-740)/2 would be 430) but it seems to be the most accurate value.
Related
I have a slideshow of images. It consists of several components:
A black background
A thin bar at the bottom of the screen which displays the current image's title (font size, and vertical dimensions in general, are not specified)
A button to fullscreen the slideshow, or exit fullscreen if it already is, placed on that bottom bar
A set of three images against the black background, taking up all available space while maintaining aspect ratio.
The images are placed on top of each other, shuffling between each other the roles of 'front', 'middle', and 'back'. The 'middle' image has opacity 1, the others have opacity 0. Every several seconds, a Javascript function designates the current 'back' image as the new 'middle' and the 'middle' image as the new 'front', changing their opacities accordingly (a CSS transition elapses over the following second, fading them into each other). The image that was formerly in 'front' is abandoned, and a new image is loaded into 'back' (via changing the src attribute directly).
I want these images to fill the entirety of the screen space available to them - everything but that bottom bar - while maintaining their aspect ratios. Whichever dimension is the lower bound on the image's size determines how large the image gets. In the meantime, the images need to be centered in whichever dimension they're not filling (so, horizontally centered for tall images, and vertically centered for wide images). Furthermore, the images need to adapt to changing screen size, preferably as the window size gets dragged.
I'm currently using a lengthy Javascript function to (1) find the available space by subtracting the height of the bottom bar from the screen height, (2) calculating the aspect ratio of the image, (3) comparing which dimension is the limiting factor, and (4) resizing and repositioning the element accordingly. This function gets triggered by the window.onresize event, and triggers manually whenever the image changes. However, when clicking-and-dragging to change the window size, the function gets called over and over. That's needlessly computationally intensive, and I'd like to have the size change in CSS instead if possible.
When I ran into this problem for the website that normally displays the images, my solution was calc():
img.class {
font-size:24pt; /* same font size as h1, which is the biggest title element. Used to calculate em */
max-width: calc(100vw - 80px); /* exactly enough to account for horizontal margins/padding */
max-height: calc(100vh - 2em); /* leave space for title but otherwise fill window */
}
The difference between that and this is that the only limiting factor was the screen size, and I knew exactly how large the other elements that were "supposed" to fit on screen were. The entire parent element was centered (and of course horizontal centering is easy), and since the screen was supposed to scroll, I didn't have to worry about vertical centering at all. So this solution is not reusable here, I don't think.
The intuitive solution I tried was to put horizontal and vertical alignment in a parent <div>, and set max-width and max-height in terms of percentages (since I can't get a different element's height in CSS to do math with):
#parent{
width: 100%;
height: 100%;
top: 0;
left: 0;
position: relative;
padding: 0;
margin: 0;
}
img {
transition: opacity 1s;
margin: auto;
max-width: 100%;
max-height: 100%;
}
But not only did this not center the images, it made them not appear at all! Removing max-width and max-height from <img> makes the image appear but overflow the sides of the screen and the navigation bar beneath, which is also not what I want. How can I properly accomplish this task using CSS rather than lengthy JavaScript?
I think this layout structure hits all of your requirements. There are three images of varying size in here I took the opacity down so you can see how they all scale together.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
}
.images {
position: relative;
height: 100%;
}
.image {
position: absolute;
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
width: 100%;
height: 100%;
opacity: 0.5;
}
.image-container {
position: relative;
width: 100%;
height: 100%;
}
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
.footer {
background-color: black;
color: white;
height: 50px;
width: 100%;
margin-top: auto;
}
</style>
</head>
<body>
<div class="container">
<div class="images">
<div class="image-container">
<div class="image" style="background-image: url(https://unsplash.it/1000/425)"></div>
<div class="image" style="background-image: url(https://unsplash.it/640/1000)"></div>
<div class="image" style="background-image: url(https://unsplash.it/800/800)"></div>
</div>
</div>
<div class="footer">Content</div>
</div>
</body>
</html>
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
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.
Centering an element only when screen is at max width
At the moment, I am centering various elements (by JavaScript) by calculating the screen's width and setting the element's "margin-left" to screen.width/2 - element.width/2.
I do this so that when the user resizes the window, the element will stay in the absolute center of the screen and become invisible if the window is resized to less than 50%.
Is this a typical way to center things only at the max width, or is there a simpler CSS approach to achieving the same effect?
An example of the effect I am trying to achieve: Khanacademy.com's logo.
[Edit]
Thanks to hungerstar, I was able to figure out the root cause of my issue. If you do not set a min-width, then margin: 0 auto will always keep your element centered.
For block elements, giving an explicit width plus margin: 0 auto is the basic technique. Inline (and inline-block) elements such as images you can center using text-align:center on the parent container.
If you have a group of elements that need to be centered but need to maintain left alignment or other formatting, i.e. a heading followed by paragraphs with lists, you can do the following:
HTML
<div id="wrapper">
<div class="outer">
<div class="inner">... Content...</div>
</div>
</div>
CSS
#wrapper {
margin: 0 auto;
width: 900px;
}
.outer {
height: 50px;
left: 50%;
position: relative;
display: inline-block; /* or float: left; */
}
.inner {
right: 50%;
position: relative;
}
You can achieve this using css.
margin: 0 auto;
EXAMPLE
OK, here was my original question, where I've left out the most important thing: to horizontally center the image, if the screen is bigger than max-width.
So far the classic trick for margin: auto doesn't work, because then width: 100% isn't the screen anymore.
#main {
margin: 0 auto;
width: 1024px;
background-color: red;
}
#bigimage {
max-width: 1024px;
width: 100%;
}
<div id="main" role="main">
<img src="img/bigimage.jpg" id="bigimage">
</div>
So I'm looking for an other solution. Any idea how to make max-width and horizontal centering work together?
Update:
OK, I'm almost there:
#main {
width: 100%;
text-align: center;
}
#bigimage {
max-width: 1024px;
width: 100%;
}
And it works great in all browsers, except IE8. Even IE 7 is OK! IE8 resizes the image without keeping the aspect ratio! I mean it makes it max-width wide but original width high. Can you help me how to make it not distort in IE8?
Also, a live site, with 500px max-width:
http://ilhaamproject.com/
Change your (updated) CSS to the following and it should work:
#main {
width: 100%;
text-align: center;
}
if your image have an static aspect ratio then it can be done with max-height. If you add max-height to your image based on the 1024px width (726px for 4by3 aspect ratio) then it would be fine in every browser. See the fiddle before applying max-height and after that. I just used 400px width instead.
HTML:
<div id="container">
<img id="bigDude" src="http://www.ladygagapic.info/wallpaper/flower-17.jpg" />
</div>
CSS:
#container{text-align:center; border:1px solid gray;}
#bigDude{max-width:400px; width:100%;}
BUT if your images are not in same size or aspect ratio you maybe need some JavaScript just like how Facebook forced to do that.
You have the #bigimage img within the #main div. Since the main div is 1024px wide, the 100% will always be 1024. The result here is that you'll always see 1024px. If you remove the width attribute from #main or change it to 100%, you should start to see what you're looking for.
Demo
I ended up opting for display:table-row ... oh well :P