gitea_admin/wondif_vue
1
0
Fork 0
generated from gitea_admin/default
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

front end

Browse Source
This commit is contained in:
Julie
2026-03-18 12:00:19 +01:00
parent b0352c963c
commit bc6ad43ea5
31 changed files with 832 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
design-system/primitives/DsMedia.vue
View File

@@ -1,7 +1,8 @@
<template>
<div class="ds-media" :class="`ds-media--${ratio}`">
<div class="ds-media" :class="[`ds-media--${ratio}`]">
<img
class="ds-media__img"
:class="[`ds-media__img--${fit}`]"
:src="src"
:alt="alt"
loading="lazy"
@@ -14,25 +15,29 @@
defineProps({
src: { type: String, required: true },
alt: { type: String, default: '' },
fit: { type: String, default: 'cover' },
ratio: { type: String, default: '' }, // 16-9 / 4-3 / square
})
</script>
<style lang="scss">
.ds-media {
width: 100%;
background: rgba(0,0,0,0.04);
overflow: hidden;
&--16-9 { aspect-ratio: 16 / 9; }
&--4-3 { aspect-ratio: 4 / 3; }
&--3-4 { aspect-ratio: 3 / 4; }
&--square { aspect-ratio: 1 / 1; }
.ds-media__img {
.ds-media {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
background: rgba(0,0,0,0.04);
overflow: hidden;
&--16-9 { aspect-ratio: 16 / 9; }
&--4-3 { aspect-ratio: 4 / 3; }
&--3-4 { aspect-ratio: 3 / 4; }
&--square { aspect-ratio: 1 / 1; }
.ds-media__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
&--cover { object-fit:cover; }
&--contain { object-fit:contain; }
}
}
}
</style>
</style>