Skip to content

Instantly share code, notes, and snippets.

@acdha

acdha/map.html

Created April 16, 2013 16:48
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save acdha/5397507 to your computer and use it in GitHub Desktop.
Save acdha/5397507 to your computer and use it in GitHub Desktop.
Download ZIP
Experiment using CSS display:table and viewport units to produce a vertically and horizontally centered image which is resized to fit within the window map.html contains a wide image; page.html contains a tall one Known browser bugs: WebKit treats CSS viewport units as static values rather than correctly updating them when the window is resized
Raw
map.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="imagetoolbar" content="no">
<![endif]-->
<title>
History of the Expedition Under the Command of Captains Lewis and Clark: To the Sources of the Missouri, thence Across the Rocky Mountains and down the River Columbia to the Pacific Ocean - World Digital Library
</title>
<style>
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
min-width: 320px;
min-height: 320px;
height: 100%;
font-family: sans-serif;
font-size: 10px;
background-color: black;
color: #999999;
}
h1 {
margin: 0;
font-size: 14px;
}
.book-viewer #viewer {
background-color: black;
height: 100vh;
width: 100vw;
font-size: large;
text-align: center;
}
.book-viewer #viewer header, .book-viewer #viewer footer {
z-index: 10;
width: 100%;
background-color: #0e182e;
background-color: rgba(14, 24, 46, 0.9);
}
.book-viewer #viewer header > nav, .book-viewer #viewer footer > nav {
display: block;
border: 0px solid #369;
}
.book-viewer #viewer header > nav > *, .book-viewer #viewer footer > nav > * {
display: inline-block;
overflow: hidden;
vertical-align: top;
}
.book-viewer #viewer header a, .book-viewer #viewer footer a {
color: #6699cc;
}
.book-viewer #viewer header {
position: fixed;
top: 0;
}
.book-viewer #viewer header > nav {
border-bottom-width: 2px;
text-align: center;
}
.book-viewer #viewer header > nav > h1 {
font-family: inherit;
max-width: 90vw;
white-space: nowrap;
text-overflow: ellipsis;
padding: 4px;
}
.book-viewer #viewer header > nav > h1 a {
color: #999999;
}
.book-viewer #viewer header > nav > form {
margin: 0 auto;
}
.book-viewer #viewer footer {
position: fixed;
bottom: 0;
}
.book-viewer #viewer footer > nav {
border-top-width: 2px;
}
.book-viewer #viewer footer > nav > * {
display: inline-block;
vertical-align: middle;
padding: 2px;
}
.book-viewer #viewer #viewport {
display: table;
width: 100%;
height: 100%;
width: 100vw;
height: 100vh;
min-height: 100vh;
max-height: 100vh;
min-width: 100vw;
max-width: 100vw;
}
.book-viewer #viewer #viewport #pages {
display: table-cell;
vertical-align: middle;
padding: 10px;
width: 100%;
height: 100%;
width: 100vw;
height: 100vh;
min-height: 100vh;
max-height: 100vh;
min-width: 100vw;
max-width: 100vw;
}
.book-viewer #viewer #viewport #pages img {
border: solid gray 1px;
max-height: 100vh;
max-width: 100vw;
}
</style>
</head>
<body class="lang_en book-viewer">
<div id="viewer" data-group="1" data-index="21">
<header>
<nav>
<h1>
<a href="http://www.wdl.org/en/item/107/">History of the Expedition Under the Command of Captains Lewis and Clark: To the Sources of the Missouri, thence Across the Rocky Mountains and down the River Columbia to the Pacific Ocean</a>
</h1>
</nav>
</header>
<div id="viewport">
<div id="pages">
<img class="current" src="http://content.wdl.org/107/service/thumbnail/1024x1024/1/1.jpg">
</div>
</div>
<footer>
<nav class="pagination">
<a href="page.html">Page (full-height)</a>
<a href="map.html">Map (full-width)</a>
</nav>
</footer>
</div>
</body>
</html>
Raw
page.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="imagetoolbar" content="no">
<![endif]-->
<title>
History of the Expedition Under the Command of Captains Lewis and Clark: To the Sources of the Missouri, thence Across the Rocky Mountains and down the River Columbia to the Pacific Ocean - World Digital Library
</title>
<style>
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
min-width: 320px;
min-height: 320px;
height: 100%;
font-family: sans-serif;
font-size: 10px;
background-color: black;
color: #999999;
}
h1 {
margin: 0;
font-size: 14px;
}
.book-viewer #viewer {
background-color: black;
height: 100vh;
width: 100vw;
font-size: large;
text-align: center;
}
.book-viewer #viewer header, .book-viewer #viewer footer {
z-index: 10;
width: 100%;
background-color: #0e182e;
background-color: rgba(14, 24, 46, 0.9);
}
.book-viewer #viewer header > nav, .book-viewer #viewer footer > nav {
display: block;
border: 0px solid #369;
}
.book-viewer #viewer header > nav > *, .book-viewer #viewer footer > nav > * {
display: inline-block;
overflow: hidden;
vertical-align: top;
}
.book-viewer #viewer header a, .book-viewer #viewer footer a {
color: #6699cc;
}
.book-viewer #viewer header {
position: fixed;
top: 0;
}
.book-viewer #viewer header > nav {
border-bottom-width: 2px;
text-align: center;
}
.book-viewer #viewer header > nav > h1 {
font-family: inherit;
max-width: 90vw;
white-space: nowrap;
text-overflow: ellipsis;
padding: 4px;
}
.book-viewer #viewer header > nav > h1 a {
color: #999999;
}
.book-viewer #viewer header > nav > form {
margin: 0 auto;
}
.book-viewer #viewer footer {
position: fixed;
bottom: 0;
}
.book-viewer #viewer footer > nav {
border-top-width: 2px;
}
.book-viewer #viewer footer > nav > * {
display: inline-block;
vertical-align: middle;
padding: 2px;
}
.book-viewer #viewer #viewport {
display: table;
width: 100%;
height: 100%;
width: 100vw;
height: 100vh;
min-height: 100vh;
max-height: 100vh;
min-width: 100vw;
max-width: 100vw;
}
.book-viewer #viewer #viewport #pages {
display: table-cell;
vertical-align: middle;
padding: 10px;
width: 100%;
height: 100%;
width: 100vw;
height: 100vh;
min-height: 100vh;
max-height: 100vh;
min-width: 100vw;
max-width: 100vw;
}
.book-viewer #viewer #viewport #pages img {
border: solid gray 1px;
max-height: 100vh;
max-width: 100vw;
}
</style>
</head>
<body class="lang_en book-viewer">
<div id="viewer" data-group="1" data-index="21">
<header>
<nav>
<h1>
<a href="http://www.wdl.org/en/item/107/">History of the Expedition Under the Command of Captains Lewis and Clark: To the Sources of the Missouri, thence Across the Rocky Mountains and down the River Columbia to the Pacific Ocean</a>
</h1>
</nav>
</header>
<div id="viewport">
<div id="pages">
<img class="current" src="http://content.wdl.org/107/service/thumbnail/1024x1024/1/21.jpg">
</div>
</div>
<footer>
<nav class="pagination">
<a href="page.html">Page (full-height)</a>
<a href="map.html">Map (full-width)</a>
</nav>
</footer>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment