generated from gitea_admin/default
44 lines
959 B
Vue
44 lines
959 B
Vue
<template>
|
|
<div class="ds-media" :class="[`ds-media--${ratio}`]">
|
|
<img
|
|
class="ds-media__img"
|
|
:class="[`ds-media__img--${fit}`]"
|
|
:src="src"
|
|
:alt="alt"
|
|
loading="lazy"
|
|
decoding="async"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
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 {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
display: block;
|
|
&--cover { object-fit:cover; }
|
|
&--contain { object-fit:contain; }
|
|
}
|
|
}
|
|
|
|
</style>
|