CSS: % sizes in width and height in menus with images
I have a site which should be suitable for mobile visitors, and therefore should scale to the dimensions of the user's screen, both in width and height. Furthermore, I have 2 navigation menus (1 left, 1 right), and some fixed info on the bottom (like a footer). All these parts contain images that should be scaled to fit into the menu's dimensions. Concretely, the page is something like (adding a random image that is too big by default):
<body>
<table class="wholepage">
<tr class="top">
<td class="left">
<table>
<tr><td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg"/></td></tr>
<tr><td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg"/></td></tr>
</table>
</td>
<td class="middle">Middle content</td>
<td class="right">
<table>
<tr><td><img src="http://apod.nasa.gov/ap开发者_StackOverflow社区od/image/0304/bluemarble2k_big.jpg"/></td></tr>
<tr><td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg"/></td></tr>
</table>
</td>
</tr>
<tr class="bottom">
<table>
<tr>
<td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg"/></td>
<td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg"/></td>
</tr>
</table>
</tr>
</table>
</body>
With the following CSS:
.wholepage {
width: 100%;
height: 100%;
}
.wholepage img {
width: 100%;
height: 100%;
}
.top {
height: 80%;
}
.left, .right {
width: 15%;
}
.middle {
width: 70%;
}
.bottom {
height: 20%;
}
Like that, the width of the page adapts itself perfectly, sticking to the 15%-70%-15% distribution between left-middle-right. However, vertically, all the images refuse to scale. How can I get the page to fit to the 80%-20% distribution for top-bottom?
EDIT: Here's a way to see it, if you fill this in in http://www.w3schools.com/css/tryit.asp?filename=trycss_default
<html>
<head>
<style type="text/css">
html, body {
height: 100%;
}
.wholepage {
width: 100%;
height: 100%;
}
.wholepage img {
width: 100%;
}
.top {
height: 80%;
}
.left, .right {
width: 15%;
}
.left {
position: fixed;
top: 0px;
left: 0px;
}
.right {
position: fixed;
top: 0px;
right: 0px;
}
.middle {
width: 70%;
margin-left: auto;
margin-right: auto;
}
.bottom {
height: 20%;
position: fixed;
bottom: 0px;
}
</style>
</head>
<body>
<div class="wholepage">
<div class="top">
<div class="left">
<table>
<tr><td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg" /></td></tr>
<tr><td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg" /></td></tr>
</table>
</div>
<div class="middle">Middle content</div>
<div class="right">
<table>
<tr><td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg" /></td></tr>
<tr><td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg" /></td></tr>
</table>
</div>
</div>
<div class="bottom">
<table>
<tr>
<td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg"/></td>
<td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg"/></td>
</tr>
</table>
</div>
</div>
</body>
Thanks!
Don't use width & height, just use max-width:
.wholepage img {
max-width: 100%;
}
IE < 8 scales images poorly and to get good quality scaling you need to use AlphaImageLoader with the SizingMethod set to scale. Probably the easiest way to do that is with Drew Diller's DD_BelatedPNG library. Be aware there are performance implications to using the AlphaImageLoader. Also, IE6 doesn't support max-width so use width: 100% in a conditional comment if you need to support IE6.
Also, I can say enough about Ethan Marcotte's A List Apart Article on Responsive Design (which is an excerpt from also excellent his book.)
First; don't use tables for styling. Use divs, or even better the html5 tags like <header> and <footer> and such.
To ensure correct handling of height with percentages, you should set html and body to 100% height as well, like:
html, body { height: 100%; }
I ended up hacking it. Unless someone knows a better way, here's what I did:
function fixHorizontalDimension(){
maxHeight = window.innerHeight * [% height desired] * 0.9;
imgs = document.getElementsByClassName([classname of wrongly sized objects]);
for(i=0; i<imgs.length; i++){
imgs[i].style.height = maxHeight;
}
}
Since the site is only to be used personally, and using a mobile browser, this fix does the job. Resizing (e.g. switching from portrait to landscape) doesn't work though.
加载中,请稍侯......
精彩评论