固定比例盒子
使用 padding 创建
这个方法通过设置容器的上边距(padding-top)来实现固定比例的效果。
查看代码
vue
<script setup lang="ts">
import Screen from '../screen/screen.vue';
</script>
<template>
<Screen>
<div class="container">
<div class="content">
<!-- 这里放入你的内容 -->
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae, voluptatum ratione dicta minus sunt itaque quo debitis aperiam excepturi possimus dolor dignissimos
totam suscipit culpa sapiente repudiandae architecto distinctio veritatis.
</div>
</div>
</Screen>
</template>
<style scoped lang="less">
@import '../common.less';
.container {
position: relative;
width: 50%;
padding-top: 50%; /* 设置高度为宽度的百分之 50, 根据需要进行调整 */
border: 1px dashed red; // 可视化等比例盒子
}
.content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
.mixin-line-clamp(5);
}
</style><script setup lang="ts">
import Screen from '../screen/screen.vue';
</script>
<template>
<Screen>
<div class="container">
<div class="content">
<!-- 这里放入你的内容 -->
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae, voluptatum ratione dicta minus sunt itaque quo debitis aperiam excepturi possimus dolor dignissimos
totam suscipit culpa sapiente repudiandae architecto distinctio veritatis.
</div>
</div>
</Screen>
</template>
<style scoped lang="less">
@import '../common.less';
.container {
position: relative;
width: 50%;
padding-top: 50%; /* 设置高度为宽度的百分之 50, 根据需要进行调整 */
border: 1px dashed red; // 可视化等比例盒子
}
.content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
.mixin-line-clamp(5);
}
</style>使用 vw 创建
查看代码
vue
<script setup lang="ts">
import Screen from '../screen/screen.vue';
</script>
<template>
<Screen>
<div class="container">
<div class="content">
<!-- 这里放入你的内容 -->
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae, voluptatum ratione dicta minus sunt itaque quo debitis aperiam excepturi possimus dolor dignissimos
totam suscipit culpa sapiente repudiandae architecto distinctio veritatis.
</div>
</div>
</Screen>
</template>
<style>
:root {
--screen-width: 100vw;
}
</style>
<style scoped lang="less">
@import '../common.less';
.container {
position: relative;
width: calc(var(--screen-width) * 0.2);
height: calc(var(--screen-width) * 0.2);
max-width: 500px;
max-height: 500px;
border: 1px dashed red;
}
.content {
.mixin-line-clamp(5);
}
</style><script setup lang="ts">
import Screen from '../screen/screen.vue';
</script>
<template>
<Screen>
<div class="container">
<div class="content">
<!-- 这里放入你的内容 -->
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae, voluptatum ratione dicta minus sunt itaque quo debitis aperiam excepturi possimus dolor dignissimos
totam suscipit culpa sapiente repudiandae architecto distinctio veritatis.
</div>
</div>
</Screen>
</template>
<style>
:root {
--screen-width: 100vw;
}
</style>
<style scoped lang="less">
@import '../common.less';
.container {
position: relative;
width: calc(var(--screen-width) * 0.2);
height: calc(var(--screen-width) * 0.2);
max-width: 500px;
max-height: 500px;
border: 1px dashed red;
}
.content {
.mixin-line-clamp(5);
}
</style>使用 固定比例的透明 SVG 代码 创建
查看代码
vue
<script setup lang="ts">
import Screen from '../screen/screen.vue';
</script>
<template>
<Screen>
<div class="container">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR4AWMYOAAAAAEAAHiy+3DAAAAAElFTkSuQmCC" class="placeholder" />
<div class="content">
<!-- 这里放入你的内容 -->
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae, voluptatum ratione dicta minus sunt itaque quo debitis aperiam excepturi possimus dolor dignissimos
totam suscipit culpa sapiente repudiandae architecto distinctio veritatis.
</div>
</div>
</Screen>
</template>
<style scoped lang="less">
@import '../common.less';
.container {
position: relative;
border: 1px dashed red; // 可视化等比例盒子
width: 50%;
> .placeholder {
display: block;
width: 100%;
height: auto;
opacity: 0;
}
}
.content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
.mixin-line-clamp(5);
}
</style><script setup lang="ts">
import Screen from '../screen/screen.vue';
</script>
<template>
<Screen>
<div class="container">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR4AWMYOAAAAAEAAHiy+3DAAAAAElFTkSuQmCC" class="placeholder" />
<div class="content">
<!-- 这里放入你的内容 -->
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae, voluptatum ratione dicta minus sunt itaque quo debitis aperiam excepturi possimus dolor dignissimos
totam suscipit culpa sapiente repudiandae architecto distinctio veritatis.
</div>
</div>
</Screen>
</template>
<style scoped lang="less">
@import '../common.less';
.container {
position: relative;
border: 1px dashed red; // 可视化等比例盒子
width: 50%;
> .placeholder {
display: block;
width: 100%;
height: auto;
opacity: 0;
}
}
.content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
.mixin-line-clamp(5);
}
</style>