基于断点设置图像高度
基于断点设置图像高度
提问于 2020-06-26 05:06:37
Vuetify的图像组件( https://vuetifyjs.com/en/components/images/ )提供了height支持。如何保持基于当前断点的高度变量？有这样的东西会很好
<v-img
:height="img.height.xs"
:sm="img.height.sm"
:md="img.height.md"
:lg="img.height.lg"
:xl="img.height.xl">
</v-img>我是否必须用一个计算的属性来解决这个问题，还是只有HTML才能解决这个问题？我的意思是，我正在寻找像TailwindCSS方法( https://tailwindcss.com/docs/height/#responsive )这样的解决方案
<div class="h-8 sm:h-12 md:h-16 lg:h-20 xl:h-24"></div>例如，我创建了一个代码片段。
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-06-27 11:51:36
Vuetify有自己的预定义和可覆盖的断点。
我认为，解决问题的最正确方法是使用计算道具。根据你的代码，应该是这样的：
<div id="app">
<v-app id="inspire">
<v-card
class="mx-auto"
max-width="400"
>
<v-img
class="white--text align-end"
src="https://cdn.vuetifyjs.com/images/cards/docks.jpg"
:height="imageHeight"
></v-img>
</v-card>
</v-app>
</div>new Vue({
el: '#app',
vuetify: new Vuetify(),
computed: {
imageHeight () {
switch (this.$vuetify.breakpoint.name) {
case 'xs': return '200px'
case 'sm': return '400px'
case 'md': return '600px'
case 'lg': return '800px'
case 'xl': return '1000px'
}
},
}
})如果您真的想解决它，只有HTML，您可以这样设置高度支柱：
<v-img
class="white--text align-end"
src="https://cdn.vuetifyjs.com/images/cards/docks.jpg"
:height="$vuetify.breakpoint.xs
? '200px'
: ($vuetify.breakpoint.sm
? '400px'
: ($vuetify.breakpoint.md
? '600px'
: ($vuetify.breakpoint.lg
? '800px'
: '1000px'
)
)
)"
></v-img>在阅读关于虚拟文档中断点的文章之后，您可能会想出一个更优雅和更合适的解决方案。
Stack Overflow用户
发布于 2020-06-26 08:43:34
您为什么只想使用HTML？
不要忘记，使用会改变窗口的大小，您需要对它做出动态的反应。这在普通HTML中是不可能的。这在脚本中是可能的，但它很复杂。使用媒体查询是一种简单而恰当的工具。
我不知道你用的是什么CSS预处理器。但是对于SASS，您可以使用基于断点的条件样式(编译为媒体查询)。
@media #{map-get($display-breakpoints, 'md-only')}
img
width: 200px
@media #{map-get($display-breakpoints, 'sm-and-down')}
img
width: 100px页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62588348
复制相关文章
相似问题
腾讯云开发者
