|
|
相关文章推荐
|
纯真的哑铃 · 漫画全集在线观看 - 哔哩哔哩漫画· 10 月前 · |
|
|
曾深爱过的葡萄 · 计算机视觉傅里叶变换 ...· 1 年前 · |
|
|
玉树临风的茶壶 · SQL Server ...· 1 年前 · |
|
|
很酷的大蒜 · http接口访问正常，https访问报错，基 ...· 2 年前 · |
|
|
气宇轩昂的热水瓶 · High-quality health ...· 2 年前 · |
基于断点设置图像高度
问
基于断点设置图像高度
EN
Stack Overflow用户
提问于
2020-06-26 05:06:37
回答 2
查看 2.5K
关注 0
票数 3
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>例如，我创建了一个代码片段。
EN
回答 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>在阅读 关于虚拟文档中断点的文章 之后，您可能会想出一个更优雅和更合适的解决方案。
票数 3
EN
Stack Overflow用户
发布于 2020-06-26 08:43:34
您为什么只想使用HTML？
不要忘记，使用会改变窗口的大小，您需要对它做出动态的反应。这在普通HTML中是不可能的。这在脚本中是可能的，但它很复杂。使用媒体查询是一种简单而恰当的工具。
我不知道你用的是什么CSS预处理器。但是对于SASS，您可以使用基于断点的条件样式(编译为媒体查询)。
@media #{map-get($display-breakpoints, 'md-only')}
推荐文章
|
|
纯真的哑铃 · 漫画全集在线观看 - 哔哩哔哩漫画 10 月前 |