diff --git a/assets/sass/_theme/_utils.sass b/assets/sass/_theme/_utils.sass index c0efe6eb4b6ba15cff3cc5fd4b2eea5b6ad58c7f..9ab86bdffd23ac233ecf21a7772f725ef8c4de25 100644 --- a/assets/sass/_theme/_utils.sass +++ b/assets/sass/_theme/_utils.sass @@ -164,11 +164,17 @@ display: block width: 100% +@mixin handle-svg-fit + picture.is-svg + img + object-fit: contain + @mixin article($background: null) position: relative display: flex flex-direction: column .media + @include handle-svg-fit @if $article-media-aspect-ratio @include aspect-ratio($article-media-aspect-ratio, 'img', $background) margin-bottom: $spacing1 diff --git a/assets/sass/_theme/blocks/pages.sass b/assets/sass/_theme/blocks/pages.sass index e4356719f3070640d250c714c77529dac27a9284..9ef5f3a5f3ecf87ea9a4402de4248f0e6f28f12b 100644 --- a/assets/sass/_theme/blocks/pages.sass +++ b/assets/sass/_theme/blocks/pages.sass @@ -11,6 +11,7 @@ display: flex flex-direction: column .media + @include handle-svg-fit order: -1 margin-bottom: $spacing1 img diff --git a/layouts/partials/commons/image.html b/layouts/partials/commons/image.html index 2cc6d1ba1ba4da16ce3d5ef0b2ab8b3558af4532..02fcadf3d8e4f14d8311cabd41753f31ffff10a4 100644 --- a/layouts/partials/commons/image.html +++ b/layouts/partials/commons/image.html @@ -32,7 +32,8 @@ {{ $tablet = .sizes.tablet }} {{ $mobile = .sizes.mobile }} {{- end -}} - <picture> + {{ $is_svg := strings.HasSuffix $image.name "svg" }} + <picture {{ if $is_svg }}class="is-svg"{{ end }}> {{- if strings.HasSuffix $image.name "svg" -}}