Help
Here's something I didn't expect to be so hard:
I have a page the display a random photo.
The image should not be larger than the viewport. (here I applied max-width)
The image should be centered in the viewport, horizontally and vertically.
To center vertically I tried to style the containers for the image as CSS tables. This does the vertical centering, but then the image doesn't scale down with the viewport. Seems that elements with table properties stretch to fit its content. Which defeat my fluid image size.
I then tried to use relative positioning, making the HTML and BODY element 100% height, offsetting the image container by 50% placing it at half height of the viewport.
But when I try to position the image itself by -50% (thinking it's take its height) to align the image in the vertical center instead of starting at the center nothing seem to work. relative position by percentage doesn't do anything. Fixed values does, but I can't use that because I don't know the image height.
Anyone has any idea on how to center a fluid image vertically in the viewport using CSS? Don't want to use JS for this.
Page 1 of 1
Vertically centering a fluid image
#1
Thomas Thomassen 
- HTTP 503
-
- Group: Members
- Posts: 2,254
- Joined: 30-April 07
- Reputation: 10
- Gender:Male
- Location:Trondheim, Norway
- Experience:Advanced
- Area of Expertise:Designer/Coder
Posted 06 February 2012 - 10:06 PM
#2
Wickham
- Web Guru
-
- Group: Moderators
- Posts: 2,876
- Joined: 11-June 09
- Reputation: 257
- Gender:Male
- Location:Salisbury UK
- Experience:Intermediate
- Area of Expertise:Web Developer
Posted 07 February 2012 - 03:25 PM
You probably need javascript to do it properly to find out the window size and size the image as a % of it.
However, this works using very simple CSS:-
The left, right, top and bottom positions are 30% leaving 40% x 40% in the middle for an image.
However, any image (all sizes) are resized to 40% x 40% of any window size, which will distort them if the window size is not the same proportions as the image. The left, right, top and bottom positions are 30% leaving 40% in the middle for an image.
So it's not a very satisfactory solution unless the image just has a pattern that can stretch.
If you delete the width and right size, the image will retain its resolution in proportion to the changing height, but it doesn't then stay exactly in the center in all window widths:-
However, this works using very simple CSS:-
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="Web Development">
<title>Test</title>
<style type="text/css">
img { display: block; position: fixed; right: 30%;
left: 30%; top: 30%; bottom: 30%; width: 40%; height: 40%; }
</style>
</head>
<body>
<img src="image.jpg" alt="My image">
</body>
</html>
The left, right, top and bottom positions are 30% leaving 40% x 40% in the middle for an image.
However, any image (all sizes) are resized to 40% x 40% of any window size, which will distort them if the window size is not the same proportions as the image. The left, right, top and bottom positions are 30% leaving 40% in the middle for an image.
So it's not a very satisfactory solution unless the image just has a pattern that can stretch.
If you delete the width and right size, the image will retain its resolution in proportion to the changing height, but it doesn't then stay exactly in the center in all window widths:-
img { display: block; position: fixed; left: 35%; top: 30%; bottom: 30%; height: 40%; }
This post has been edited by Wickham: 07 February 2012 - 03:47 PM
#3
hodephdesign
- Dedicated Member
-
- Group: Members
- Posts: 129
- Joined: 18-January 12
- Reputation: 10
- Gender:Male
- Location:Cardiff, Wales
- Experience:Advanced
- Area of Expertise:Designer/Coder
Posted 07 February 2012 - 03:31 PM
I've always had problems with this, resorted to jQuery/javascript 90% of the time...
- ← Help with web content and menu
- CSS, XHTML/HTML & JavaScript
- Prevent redirection when validation occurs →
Share this topic:
Page 1 of 1