---
layout: page
---
<style TYPE="text/css">
.gallery-image-wrapper {
  height: 300px;
  width: 300px;
  float: left;
  margin: 1em;
  position: relative;
  text-align: center;
}
.gallery-image {
  margin: auto;
  position: absolute;
  top: 0px;
  bottom: 0px;
  max-height: 100%;
  max-width: 100%;
}
</style>
<h1><a href="/{{ site.gallery_dir }}">{{ page.title }}</a></h1>
<hr />
{% for image in page.images %}
    <div class="gallery-image-wrapper">
        <a href="{{ image }}"><img class="gallery-image" src="thumbs/{{ image }}" /></a>
    </div>
{% endfor %}

---
layout: page
---
<style TYPE="text/css">
.gallery-image-wrapper {
  height: 300px;
  width: 300px;
  display: inline-block;
  margin: 1em;
  position: relative;
  text-align: center;
}
.gallery-image {
  margin: auto;
  position: absolute;
  top: 0px;
  bottom: 0px;
  max-height: 100%;
  max-width: 100%;
}
</style>
<h1><a href="/{{ site.gallery_dir }}">{{ page.title }}</a></h1>
<hr />
{% for image in page.images %}
    <div class="gallery-image-wrapper">
        <a href="{{ image }}"><img class="gallery-image" src="thumbs/{{ image }}" /></a>
    </div>
{% endfor %}

Work around a layout bug with large galleries in Chrome.
Work around a layout bug with large galleries in Chrome.
