Web Design Forum: Thomas Thomassen - Viewing Profile - Web Design Forum

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.

Hi there! Long time no see!

I've been playing with CSS for smart phones for the first time. I got an HTML page where I want desktop users get one CSS file, while users of smart phones get another.

Been trying this code, based on googling the topic, but it doesn't seem to work when I test on my Sony Ericsson Arc, Android 2.3.4.

<link rel="stylesheet" type="text/css" href="screen.css" media="screen and (min-device-width: 481px)" />
  <link rel="stylesheet" type="text/css" href="handheld.css" media="only screen and (max-device-width: 480px)" />
  <link rel="stylesheet" type="text/css" href="handheld.css" media="screen and (-webkit-device-pixel-ratio:0.75)" />
  <link rel="stylesheet" type="text/css" href="handheld.css" media="handheld" type="text/css" />

The full page HTML is at this page: http://www.thomthom.net/qr/photos/
At the moment I've commented out the snippet you see above so it only serves the handheld stylesheet.

But how do you serve CSS to smartphones specifically? The media queries doesn't seem to do anything.

My first thought was that media type "handheld" was how you did it, but as it turns out smart phones uses the "screen" media style. But then the min-device properties should've worked, right?