Improve image section by fixing aspect ratio to 16:9

example/static/main.scss

@@ -242,9 +242,16 @@ section.images {
       max-width: $max-width;
       margin: 0.5em;
 
-      img {
+      div {
-        display: block;
+        position: relative;
-        width: 100%;
+        padding-bottom: 56%;
+
+        img {
+          position: absolute;
+          object-fit: cover;
+          height: 100%;
+          width: 100%;
+        }
       }
     }
   }

example/static/main1.scss.css

@@ -1,216 +0,0 @@
-html, body {
-  font-family: sans-serif;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0; }
-
-a {
-  color: #3573a8;
-  text-decoration: none; }
-  a:hover {
-    text-decoration: underline; }
-
-a.button, button.button {
-  cursor: pointer;
-  font-family: sans-serif;
-  font-size: 1.5em;
-  line-height: 1.25;
-  border-radius: 5px;
-  display: inline-block;
-  text-decoration: none;
-  border: none;
-  padding: 5px 20px;
-  background: #3573a8;
-  color: white;
-  box-sizing: border-box; }
-  a.button:hover, button.button:hover {
-    color: #3573a8;
-    background: white;
-    box-shadow: inset 0 0 0 2px #3573a8; }
-
-h1, h2, h3, h4, h5, h6 {
-  margin: .5em 0;
-  font-family: sans-serif; }
-
-h1 {
-  font-size: 2em; }
-
-h2 {
-  font-size: 1.5em; }
-
-h3 {
-  font-size: 1.25em; }
-
-h4, h5, h6 {
-  font-size: 1em; }
-
-a.edit {
-  color: red;
-  text-decoration: none;
-  font-size: 1rem;
-  font-weight: normal; }
-  a.edit:before {
-    content: '[ '; }
-  a.edit:after {
-    content: ' ]'; }
-
-section a.edit {
-  position: absolute;
-  bottom: 0;
-  left: 1em; }
-
-table {
-  border-collapse: collapse; }
-  table th, table td {
-    padding: 1em; }
-  table th {
-    border-bottom: 2px solid #3573a8; }
-
-div.wrapper {
-  box-sizing: border-box;
-  max-width: 700px;
-  margin: auto;
-  padding: 0 1rem; }
-
-div.spacer {
-  height: 1rem;
-  clear: both; }
-
-header {
-  text-align: center; }
-
-nav button#hamburger {
-  position: absolute;
-  z-index: 1;
-  top: 0;
-  right: 0; }
-  nav button#hamburger .hamburger-inner, nav button#hamburger .hamburger-inner:before, nav button#hamburger .hamburger-inner:after {
-    background: #3573a8; }
-  nav button#hamburger.is-active {
-    position: fixed; }
-  nav button#hamburger:hover {
-    opacity: 1 !important; }
-  nav button#hamburger:focus {
-    outline: none !important; }
-
-nav ul {
-  border-top: 2px solid #3573a8;
-  border-bottom: 2px solid #3573a8;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  text-align: center;
-  overflow: hidden;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-items: center;
-  align-content: start; }
-  nav ul li {
-    margin: 0;
-    padding: 0;
-    display: inline-block; }
-    nav ul li a {
-      font-size: 1.25rem;
-      padding: 5px .5em;
-      transition: .1s ease;
-      display: inline-block;
-      font-weight: bold; }
-
-@media (min-width: 500px) {
-  nav a:hover:not(.edit), nav a.current {
-    text-decoration: none;
-    color: white;
-    background: #3573a8; }
-  nav button#hamburger {
-    display: none; } }
-
-@media (max-width: 500px) {
-  nav {
-    padding: 0; }
-    nav button#hamburger {
-      display: block; }
-    nav ul#menu {
-      position: fixed;
-      overflow-y: auto;
-      z-index: 1;
-      margin: 0;
-      padding: 0;
-      padding-top: 2em;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background: white;
-      list-style: none;
-      transition: .5s ease;
-      transform: translatex(100%); }
-      nav ul#menu li {
-        width: 100%;
-        box-sizing: border-box;
-        padding: 1em;
-        margin: 0 1em;
-        border-bottom: 1px solid #ddd;
-        line-height: 1.5;
-        text-align: center; }
-        nav ul#menu li a {
-          text-decoration: none; }
-      nav ul#menu.visible {
-        transform: translatex(0); } }
-
-div.edit {
-  position: fixed;
-  right: 1em;
-  bottom: 1em;
-  z-index: 1000; }
-  div.edit img {
-    width: 75px; }
-
-section {
-  clear: both;
-  position: relative; }
-  section div.title {
-    text-align: center; }
-  section div.video div.iframe {
-    width: 100%;
-    padding-bottom: 56%;
-    position: relative; }
-    section div.video div.iframe iframe {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      left: 0;
-      top: 0; }
-
-section.images div.images {
-  display: flex;
-  flex-wrap: wrap;
-  margin: 0.25em;
-  justify-content: center; }
-  section.images div.images div.image {
-    flex: 1 1 100px;
-    max-width: 700px;
-    margin: 0.5em; }
-    section.images div.images div.image img {
-      display: block;
-      width: 100%; }
-
-section.contact div.message {
-  display: none; }
-
-section.contact div.formfield {
-  padding: 0.5em 0; }
-
-section.contact form input, section.contact form textarea {
-  box-sizing: border-box;
-  font-family: inherit;
-  font-size: inherit;
-  display: block;
-  width: 100%;
-  padding: 0.5em;
-  margin: 0; }
-
-footer {
-  min-height: 10em; }
-
-/*# sourceMappingURL=main1.scss.css.map */

example/templates/base.html

@@ -7,7 +7,7 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="icon" href="{% static 'favicon.png' %}">
-    <link rel="stylesheet" href="{% static 'main1.scss.css' %}">
+    <link rel="stylesheet" href="{% static 'main.scss.css' %}">
     <link rel="stylesheet" href="{% static 'hamburgers.css' %}">
     <title>{% block title %}Awesome Website{% endblock %}</title>
     {% block extrahead %}{% endblock %}

example/templates/images.html

@@ -4,7 +4,9 @@
   <div class="images">
     {% for image in section.images.all %}
       <div class="image">
-        <img src="{% thumbnail image.image 700x700 %}">
+        <div>
+          <img src="{% thumbnail image.image 700x700 %}">
+        </div>
       </div>
     {% endfor %}
   </div>