diff options
| -rw-r--r-- | galerie.html | 30 | ||||
| -rw-r--r-- | stylesheets/galerie.css | 10 |
2 files changed, 14 insertions, 26 deletions
diff --git a/galerie.html b/galerie.html index 1c974ca..ab6afdf 100644 --- a/galerie.html +++ b/galerie.html @@ -1,24 +1,18 @@ <main> <h1>Photos</h1> <div class="mosaic photos"> - <div class="photo"> - <a href="images/photos/PierreVaillant2.jpg" - target="_blank"> - <img src="images/photos/PierreVaillant2.jpg"> - </a> - </div> - <div class="photo"> - <a href="images/photos/PierreVaillant1.jpg" - target="_blank"> - <img src="images/photos/PierreVaillant1.jpg"> - </a> - </div> - <div class="photo"> - <a href="images/photos/CyrilGhestem1.jpg" - target="_blank"> - <img src="images/photos/CyrilGhestem1.jpg"> - </a> - </div> + <a class="photo" href="images/photos/PierreVaillant2.jpg" + target="_blank"> + <img src="images/photos/PierreVaillant2.jpg"> + </a> + <a class="photo" href="images/photos/PierreVaillant1.jpg" + target="_blank"> + <img src="images/photos/PierreVaillant1.jpg"> + </a> + <a class="photo" href="images/photos/CyrilGhestem1.jpg" + target="_blank"> + <img src="images/photos/CyrilGhestem1.jpg"> + </a> </div> <h1>Vidéos</h1> <div class="mosaic videos"> diff --git a/stylesheets/galerie.css b/stylesheets/galerie.css index dc974a9..28166b8 100644 --- a/stylesheets/galerie.css +++ b/stylesheets/galerie.css @@ -4,20 +4,14 @@ grid-gap: 0.8em; } -.mosaic .photo { +.mosaic a.photo { position: relative; width: 100%; height: 0; padding-bottom: 100%; } -.mosaic .photo > * { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; -} .mosaic img { + position: absolute; object-position: center; object-fit: cover; height: 100%; |