From: Pieter Jan De Smedt <pieterjan@digitalcomet.be>
Date: Wed, 24 Jan 2018 17:57:04 +0000 (+0100)
Subject: Add some common photography aspect ratios (5:4, 5:3, 3:1) and all aspect ratio portra... 
X-Git-Tag: 0.7.0~24
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=6bfc1a61f76a93fc5555772bf7a0e4b7d0de9c84;p=thirdparty%2Fbulma.git

Add some common photography aspect ratios (5:4, 5:3, 3:1) and all aspect ratio portrait counterparts
---

diff --git a/docs/documentation/elements/image.html b/docs/documentation/elements/image.html
index cf7c03286..1cd6b4495 100644
--- a/docs/documentation/elements/image.html
+++ b/docs/documentation/elements/image.html
@@ -77,7 +77,7 @@ dimensions:
     {% include anchor.html name="Responsive images with ratios" %}
 
     <div class="content">
-      <p>If you don't know the exact dimensions but know the <strong>ratio</strong> instead, you can use one of the <strong>5 ratio modifiers</strong>:</p>
+      <p>If you don't know the exact dimensions but know the <strong>ratio</strong> instead, you can use one of the <strong>16 ratio modifiers</strong>, which include [common aspect ratios in still photography](https://en.wikipedia.org/wiki/Aspect_ratio_(image)#Still_photography):</p>
     </div>
 
     <table id="images" class="table is-bordered">
@@ -85,13 +85,18 @@ dimensions:
         <tr>
           <td><code>image is-square</code></td>
           <td><figure class="image is-square"><img src="{{site.url}}/images/placeholders/480x480.png"></figure></td>
-          <td>Square (or 1by1)</td>
+          <td>Square (or 1 by 1)</td>
         </tr>
         <tr>
           <td><code>image is-1by1</code></td>
           <td><figure class="image is-1by1"><img src="{{site.url}}/images/placeholders/480x480.png"></figure></td>
           <td>1 by 1</td>
         </tr>
+        <tr>
+          <td><code>image is-5by4</code></td>
+          <td><figure class="image is-5by4"><img src="{{site.url}}/images/placeholders/600x480.png"></figure></td>
+          <td>5 by 4</td>
+        </tr>
         <tr>
           <td><code>image is-4by3</code></td>
           <td><figure class="image is-4by3"><img src="{{site.url}}/images/placeholders/640x480.png"></figure></td>
@@ -102,6 +107,11 @@ dimensions:
           <td><figure class="image is-3by2"><img src="{{site.url}}/images/placeholders/480x320.png"></figure></td>
           <td>3 by 2</td>
         </tr>
+        <tr>
+          <td><code>image is-5by3</code></td>
+          <td><figure class="image is-5by3"><img src="{{site.url}}/images/placeholders/800x480.png"></figure></td>
+          <td>5 by 3</td>
+        </tr>
         <tr>
           <td><code>image is-16by9</code></td>
           <td><figure class="image is-16by9"><img src="{{site.url}}/images/placeholders/640x360.png"></figure></td>
@@ -112,7 +122,47 @@ dimensions:
           <td><figure class="image is-2by1"><img src="{{site.url}}/images/placeholders/640x320.png"></figure></td>
           <td>2 by 1</td>
         </tr>
-      </tbody>
+        <tr>
+          <td><code>image is-3by1</code></td>
+          <td><figure class="image is-3by1"><img src="{{site.url}}/images/placeholders/720x240.png"></figure></td>
+          <td>3 by 1</td>
+	    </tr>
+        <tr>
+          <td><code>image is-4by5</code></td>
+          <td><figure class="image is-4by5"><img src="{{site.url}}/images/placeholders/480x600.png"></figure></td>
+          <td>4 by 5</td>
+	    </tr>
+        <tr>
+          <td><code>image is-3by4</code></td>
+          <td><figure class="image is-3by4"><img src="{{site.url}}/images/placeholders/480x640.png"></figure></td>
+          <td>3 by 4</td>
+	    </tr>
+	    <tr>
+          <td><code>image is-2by3</code></td>
+          <td><figure class="image is-2by3"><img src="{{site.url}}/images/placeholders/320x480.png"></figure></td>
+          <td>2 by 3</td>
+	    </tr>
+        <tr>
+          <td><code>image is-3by5</code></td>
+          <td><figure class="image is-3by5"><img src="{{site.url}}/images/placeholders/480x800.png"></figure></td>
+          <td>3 by 5</td>
+        </tr>
+	    <tr>
+          <td><code>image is-9by16</code></td>
+          <td><figure class="image is-9by16"><img src="{{site.url}}/images/placeholders/360x640.png"></figure></td>
+          <td>9 by 16</td>
+	    </tr>
+	    <tr>
+          <td><code>image is-1by2</code></td>
+          <td><figure class="image is-1by2"><img src="{{site.url}}/images/placeholders/320x640.png"></figure></td>
+          <td>1 by 2</td>
+	    </tr>
+	    <tr>
+	      <td><code>image is-1by3</code></td>
+	      <td><figure class="image is-1by3"><img src="{{site.url}}/images/placeholders/240x720.png"></figure></td>
+	      <td>1 by 3</td>
+	    </tr>
+		</tbody>
     </table>
 
     <div class="content">
diff --git a/sass/elements/image.sass b/sass/elements/image.sass
index 52b7a1ca5..10bad209f 100644
--- a/sass/elements/image.sass
+++ b/sass/elements/image.sass
@@ -12,10 +12,20 @@ $dimensions: 16 24 32 48 64 96 128 !default
   // Ratio
   &.is-square,
   &.is-1by1,
+  &.is-5by4,
   &.is-4by3,
   &.is-3by2,
+  &.is-5by3,
   &.is-16by9,
-  &.is-2by1
+  &.is-2by1,
+  &.is-3by1,
+  &.is-4by5,
+  &.is-3by4,
+  &.is-2by3,
+  &.is-3by5,
+  &.is-9by16,
+  &.is-1by2,
+  &.is-1by3
     img
       +overlay
       height: 100%
@@ -23,14 +33,34 @@ $dimensions: 16 24 32 48 64 96 128 !default
   &.is-square,
   &.is-1by1
     padding-top: 100%
+  &.is-5by4
+    padding-top: 80%
   &.is-4by3
     padding-top: 75%
   &.is-3by2
     padding-top: 66.6666%
+  &.is-5by3
+    padding-top: 60%
   &.is-16by9
     padding-top: 56.25%
   &.is-2by1
     padding-top: 50%
+  &.is-3by1
+    padding-top: 33.3333%
+  &.is-4by5
+    padding-top: 125%
+  &.is-3by4
+    padding-top: 133.3333%
+  &.is-2by3
+    padding-top: 150%
+  &.is-3by5
+    padding-top: 166.6666%
+  &.is-9by16
+    padding-top: 177.7777%
+  &.is-1by2
+    padding-top: 200%
+  &.is-1by3
+    padding-top: 300%
   // Sizes
   @each $dimension in $dimensions
     &.is-#{$dimension}x#{$dimension}