fix(figures): constrain width of large images
Large images that exceed the bounds of parent containers are constrained to a
maximum width of the parent. Some images don't scale down well, to accommodate
inspection of figures a link to the enlarged image is provided.
Change-Id: I4b55b1ef91f1c9259722ca60a5e254938405570a
diff --git a/browser/index.js b/browser/index.js
index 6d3dc39..3cce8aa 100644
--- a/browser/index.js
+++ b/browser/index.js
@@ -60,9 +60,16 @@
// Update img elements to display alt text in a figcaption.
dom.all('main img').forEach(function(img) {
+ var a = dom.element('a');
+ a.setAttribute('href', img.src);
+ a.setAttribute('target', '_blank');
+ a.appendChild(img.cloneNode());
+
+ var caption = dom.element('figcaption', img.alt);
var figure = dom.element('figure');
- figure.appendChild(img.cloneNode());
- figure.appendChild(dom.element('figcaption', img.alt));
+ figure.appendChild(a);
+ figure.appendChild(caption);
+
img.parentNode.replaceChild(figure, img);
});
diff --git a/stylesheets/main.less b/stylesheets/main.less
index b4219e4..76f2e9c 100644
--- a/stylesheets/main.less
+++ b/stylesheets/main.less
@@ -110,6 +110,10 @@
margin: 0;
}
+figure img {
+ max-width: 100%;
+}
+
figcaption {
margin: @gutter-quarter 0;
color: @color-blue-grey-500;
