材质UI卡媒体高度为纵横比还是使用vh？
材质UI卡媒体高度的选择应根据具体情况而定。材质UI是一种基于Google Material Design设计语言的前端框架，用于构建现代化的Web应用程序。在材质UI中，卡片是一种常见的UI元素，用于展示信息和内容。
对于卡片中嵌入的媒体元素（如图片、视频等），可以根据需求选择使用纵横比（aspect ratio）或视口高度（vh）来设置高度。
- 纵横比（aspect ratio）：使用纵横比可以确保媒体元素在不同屏幕尺寸下保持一定的宽高比例，以适应不同设备的显示效果。通过设置媒体元素的宽度和padding-bottom属性来实现。例如，可以使用16:9的纵横比（即宽高比为1.77:1），设置padding-bottom为56.25%（即高度为宽度的56.25%），以实现一个宽高比为16:9的媒体元素。
- 视口高度（vh）：使用视口高度可以根据设备的可视区域高度来设置媒体元素的高度，以确保其在不同屏幕尺寸下占据合适的空间。视口高度是相对于视口高度的百分比，例如，设置媒体元素的高度为50vh，表示其高度将占据可视区域高度的50%。
选择使用纵横比还是视口高度取决于具体的设计需求和用户体验考虑。如果需要确保媒体元素在不同屏幕尺寸下保持一定的宽高比例，可以选择纵横比；如果需要根据设备的可视区域高度来自适应调整媒体元素的高度，可以选择视口高度。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 腾讯云前端开发服务：https://cloud.tencent.com/product/fe
- 腾讯云后端开发服务：https://cloud.tencent.com/product/ba
- 腾讯云数据库服务：https://cloud.tencent.com/product/cdb
- 腾讯云服务器运维服务：https://cloud.tencent.com/product/cvm
- 腾讯云音视频服务：https://cloud.tencent.com/product/tcav
- 腾讯云人工智能服务：https://cloud.tencent.com/product/ai
- 腾讯云物联网服务：https://cloud.tencent.com/product/iot
- 腾讯云移动开发服务：https://cloud.tencent.com/product/mob
- 腾讯云存储服务：https://cloud.tencent.com/product/cos
- 腾讯云区块链服务：https://cloud.tencent.com/product/baas
- 腾讯云元宇宙服务：https://cloud.tencent.com/product/mu
相关·内容
1回答
有没有办法将其设置为纵横比？例如，在300px宽的卡上是200px高，而在600px宽的卡上是400px高？这将是我首选的方式。 作为替代方案，我如何才能使用vh作为高度？
浏览 15提问于2020-11-16得票数 0
回答已采纳
我有正方形的div，这是由padding-bottom: 100%;平方和设置position: absolute;为子。当父div的宽度大于高度时，会出现方形溢出屏幕和滚动条。我为这个例子创建了新的js小提琴 div.stretchy-wrapper { padding-bottom: 100%;}
div.stretchy-wrapper {
w
浏览 0提问于2019-03-11得票数 1
回答已采纳
我需要一个高宽比为320x576的div在浏览器中水平居中对齐，高度等于浏览器ie 100vh，这样当浏览器高度改变时，div的宽度也会相应地改变。我不想使用javascript。
浏览 2提问于2019-11-15得票数 0
1回答
有没有办法控制文本的纵横比，使其在HTML元素中始终保持相同的相对大小，并保持相同的纵横比，而不管其容器的大小是什么？我希望保持文本的纵横比相对于它的容器是相同的，无论这个框被拉伸了多少，等等。它需要是动态的，但如果我使用vw，并降低高度，文本最终会超出其
浏览 23提问于2017-12-22得票数 0
3回答
当我将height增加到： background-size: 100vw 55vh !important;
height: 55vh !important;
浏览 32提问于2020-10-01得票数 0
我有一个div，它以页面为中心，以保持其纵横比(16:9)的方式与视口缩放。问题是，我希望里面的字体和内容也随着div的大小而缩放。Vmin在很大程度上可以正常工作，没有问题。如果div的纵横比是1:1，它将完美工作，因为vmin直接检查视口的高度和宽度之间的较小值，并且您不能设置自定义纵横比。
<!我不相信在纯css中有一种方法(但如果有，那将是最好的)，但我认为在javascript中可以使用一个事件侦听器来调整div的大小
浏览 10提问于2017-01-01得票数 3
回答已采纳
在使用来自Yootheme的widgetkit的媒体播放器时，我注意到该脚本根据海报框的宽度计算视频播放器的高度。我将海报框的宽度设置为940px，Mediaelement.js将高度设置为528px。这通常是可以的，如果视频和海报图像的纵横比是16:9。然而，我在2.35工作。由于有一个响应式模板，我无法设置包含视频的div的高度，因为当在平板电脑/手机上观看时，这会影响模板。
是否可以更改Mediaelement.js中
浏览 0提问于2013-01-10得票数 1
我试过使用标签，但当窗口调整大小时，我需要视频来填充窗口的大小。在最大的规模，它填补空间和缩小，它开始增加大量的白色空间在顶部和底部。
浏览 3提问于2020-03-31得票数 0
回答已采纳
我有一个包裹在父div中的iframe，我知道父div和iframe的高度将是它们的父(或页面)的100%。以同样的方式，将iframe视频放在父div中，并使用padding-top: 56.25%;来保持4:3的纵横比-我如何使用宽度来做到这一点？
浏览 28提问于2020-08-11得票数 0
我和我的团队正在开发一个不同屏幕大小的模拟器。在集成时，我们注意到一些属性与其他属性重叠，而有些属性并不是唯一可见的。那么我们如何让我们的应用程序适应不同的屏幕尺寸呢？我浏览了mediaquery()小部件，但我不太理解。
浏览 2提问于2021-05-31得票数 0
1回答
当浏览器窗口宽度大于图像的纵横比时，我尝试放置一个高度为100vh的图像居中，宽度为自动，当我将浏览器窗口的宽度减小到低于所显示图像的宽度时，图像的宽度应为100vw，高度为自动。始终保持图像的纵横比，以便图像始终完全显示，无论是宽度还是高度停靠到窗口。不会变形，并且始终位于不停靠到窗口的位置。 这就是我到目前为止所拥有的。是的，我知道我在img和div中使用了类
浏览 31提问于2020-11-06得票数 0
回答已采纳
1回答
我正在使用Azure媒体服务和Azure功能为一个网站构建一个VOD元素。基本上，当上传源视频时，一个blob触发器从一个DurableOrchestration开始，创建一个资产并对视频进行编码。上传的视频都是16:9的纵横比，这都是好的。我的问题是如何检测上传视频的纵
浏览 0提问于2018-10-12得票数 1
回答已采纳
在这个iframe视频和照片的16:9的纵横比将显示给用户(这将是一个离线应用程序运行在火狐，有点像一个原始媒体播放器)。它需要垂直居中，宽度为100%，这样就可以接触到浏览器窗口的两侧，而且最重要的是，它必须始终是完全可见的！(或者，用户甚至没有最大限度地利用浏览器，并且在一个笨拙的比例窗口中使用应用程序，其纵横比甚至更高)。
因此，iframe需要在其底部被浏览器窗口
浏览 5提问于2014-10-29得票数 0
回答已采纳
1回答
基本上，这个想法是为了让pitch响应，并成为web/原生开发的可重用组件(我将使用React)。
浏览 15提问于2021-07-08得票数 1
它涉及到一个div中的背景图像，它的宽度为视口的100%。背景图像是1000 is宽，但我希望它总是伸展以填充上面提到的div的宽度，无论视口是200 is宽还是600 is宽，还是1000 is宽还是1600 is宽。另一个要求是，图形应该保持其纵横比，除非它的高度小于50 at，此时图形应该保持在50 at的最低高度，并且在div内保持水平居中。我使用的是背景大小:掩护，当视口为>= 500 of时(即背景
浏览 2提问于2015-07-29得票数 1
回答已采纳
2回答
我有一个页面，其中包含一个DIV，它保持一个纵横比。我在div中有一些文本，它在字体大小上使用VW，当页面宽度改变时，它会保持文本大小--这很好。但是当用户改变窗口高度时-我不能让它以相同的方式响应-因为大众和VH不能一起玩。 height: 68.60vw; /* height:width ratio = 9/16 = .5625
浏览 1提问于2016-10-11得票数 5
2回答
我从MDN中引用了，但不明白为什么当CSS body { width: 800px; height: 800px; }被注释掉时，下面的代码段不显示iPhone图像(当给出显式的宽度/高度值时，它会像预期的那样工作我假设它与body的宽度和高度有关，但我想完全了解发生了什么。
浏览 19提问于2022-04-22得票数 0
回答已采纳
1回答
我想让高宽比由父母的高度控制。在我的示例中，我有两个div。其中的高度由wrap div控制。所以在第一个div里面有一个div，它应该以16:9的纵横比显示。如何在css中做到这一点？
.wra
浏览 10提问于2019-10-21得票数 0
回答已采纳
当我调整窗口宽度时，它看起来很好，但当调整高度时，文本不会调整大小，这反过来会在括号上造成溢出。bold .7vw/1 tungsten, sans-serif; width: auto; box-shadow: 0;我尝试过使用vmin，但这并不管用，因为窗口的高度几乎总是小于宽度。可以同时使用vw和vh来调整窗口的宽度和高度吗？
浏览 41提问于2017-08-05得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
