refactor: Style photo display

src/fellchensammlung/static/fellchensammlung/css/styles.css

@@ -1,3 +1,8 @@
+html, body {
+    margin: 0;
+    height: 100%;
+}
+
 .content-box {
     margin-top: 25px;
 }
@@ -321,4 +326,19 @@ h1 {
     .card-rule {
         width: 100%;
     }
+}
+
+.photos {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.card-photo {
+    flex: 1 16%;
+    margin: 10px;
+}
+
+.card-photo img {
+    max-width: 100%;
+    border-radius: 10%;
 }

src/fellchensammlung/templates/fellchensammlung/detail-animal-partial.html

@@ -18,7 +18,11 @@
 </div>
 <p>{{ animal.description }}</p>
 <h2>Bilder</h2>
-{% for image in animal.photos_list %}
+<div class="photos">
-<img src="/media/{{ image.image }}">
+    {% for image in animal.photos_list %}
-{% endfor %}
+        <div class="card-photo">
+            <img src="/media/{{ image.image }}" alt="{{ image.alt_text }}">
+        </div>
+    {% endfor %}
+</div>
 </div>