Loading [MathJax]/jax/output/CommonHTML/config.js

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >问答首页 >如何设置元素的宽度和高度，但只能根据屏幕大小选择较大的元素？

问如何设置元素的宽度和高度，但只能根据屏幕大小选择较大的元素？
EN

Stack Overflow用户

提问于 2018-07-05 22:26:28

回答 2查看 165关注 0票数 0

我正在创建一个具有灵活布局的网站。我有一个背景视频，我想让它有100%的宽度或100%的高度。我只想在任何给定的情况下使用宽度或高度，我希望浏览器选择两个维度中的哪一个会使视频变得最大。我不能使用min-height和min- width，因为视频明显大于屏幕的大小，所以我必须设置实际的宽度和实际高度，但我希望浏览器根据屏幕的纵横比在使用宽度或高度之间切换。

有谁知道这是怎么做到的吗？理想情况下，解决方案应该只使用CSS和HTML，但如果只能使用JavaScript，我愿意接受任何建议！提前感谢！

EN

回答 2

Stack Overflow用户

发布于 2018-07-05 23:08:15

添加一个以viewport作为其名称的meta标记，然后在css中设置position属性，这可能会满足您的需要。

票数 0

EN

Stack Overflow用户

发布于 2018-07-05 23:14:27

将最小宽度/高度与视口宽度/高度组合：

CSS：

#backgroundVideo{
    min-height : 100vw; /* the height will always be at least as great as the viewport width */
    min-width : 100vh; /* the width will always be at least as great as the viewport height */
}

票数 0

EN

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/51200682

复制

相关文章

【程序猿硬核科普】Chrome控制台的基本操作 | 谷歌浏览器控制台格式错乱解决方法

javascript api https 网络安全

写前端页面时候肯定用得到Chrome的控制台，在Console下调试各种bug是常有的事，话不多说，上干货。文末有彩蛋哦(*^▽^*)。

浩Coding

2020/02/21

7.3K0

【程序猿硬核科普】Chrome控制台的基本操作 | 谷歌浏览器控制台格式错乱解决方法

Chrome浏览器控制台支持中文

接口浏览器

❝昨天在使用Chrome浏览器查看请求接口的时候，突然发现Chrome浏览器控制台已经支持中文了。特意来分享一下新消息。 ❞ 本地版本号：94.0.4606.61

FunTester

2021/10/08

8530

操作系统之调度

调度研究的问题：当有一堆任务要处理，但由于资源有限，这些事情没法同时处理。这就需要确定某种规则来决定处理这些任务的顺序，这就是调度研究的问题。

kif

2023/02/27

8050

《现代操作系统》—— 调度

编程算法 windows

现代计算机都是多道程序设计系统。在多道程序设计系统中，通常会有多个进程或线程同时竞争同一个CPU。只要有2个或更多的进程处于就绪状态，那么这种情形就发生了：CPU必须要在多个就绪的进程中选择下一个要运行的程序。在操作系统中，完成这个选择工作的程序叫做调度程序（scheduler）。该程序使用的算法叫做调度算法。许多适用于进程调度的方法同样也适用于线程调度。内核管理线程的时候，调度是按照线程级别进行的，与线程所属的进程没有关联。本文主要讨论同样适用于进程和线程调度的问题。然后介绍线程调度所独有的问题。本文讨论的问题假设机器是单CPU单核。

VV木公子

2021/10/05

1.1K0

操作系统-进程调度

进程调度是指在进程之间选择一个进程将其送上CPU执行，通常这个是由操作系统中的调度程序执行。

shysh95

2021/09/26

1.4K0

一个Angular 5教程：一步一步指导实现你的第一个Angular 5应用程序

现在我们可以app.component.html用这个替换：Angular是由Google开发的AngularJS框架的新版本。它带有一个完整的重写，以及各种改进，包括优化构建和更快的编译时间。在这个Angular 5教程中，我们将从头开始构建一个笔记应用程序。如果您一直在等待学习Angular 5，本教程适合您。

WindCoder

2018/09/19

42.7K0

一个Angular 5教程：一步一步指导实现你的第一个Angular 5应用程序

msfconsole 控制台使用和操作[通俗易懂]

https linux 网络安全安全 http

Msfconsole提供了一个一体化的集中控制台。通过msfconsole，你可以访问和使用所有的metasploit的插件，payload，利用模块，post模块等等。Msfconsole还有第三方程序的接口，比如nmap，sqlmap等，可以直接在msfconsole里面使用。在启动MSF终端之后，可以首先输入help命令列出MSF终端所支持的命令列表，包括核心命令集和后端数据库命令集。对于其中的大部分命令，你可以输入help［COMMAND］，进一步查看该命令的使用帮助信息。

全栈程序员站长

2022/10/29

2.9K0

msfconsole 控制台使用和操作[通俗易懂]

在浏览器控制台安装npm包

npm https cdn 网络安全 javascript

我们都知道，npm 是 JavaScript 世界的包管理工具,并且是 Node.js 平台的默认包管理工具。通过 npm 可以安装、共享、分发代码,管理项目依赖关系。虽然作为命令行工具的 npm 近年来逐渐式微，但是作为广泛使用的存储库的 npm，却依然如日中天，还是世界上最大的软件注册表。

winty

2021/12/06

2.8K0

COS控制台进阶 - 文件快捷操作

图片处理数据万象视频音频音视频

前言对象存储（Cloud Object Storage，COS）控制台已集成了数据万象（Cloud Infinite，CI）的各项能力，为了帮助用户更便捷地在上传、预览、操作文件的过程中使用数据万象的功能，实现对云上的图片、音频、视频、文档等的快速数据处理，在COS控制台-文件列表及文件详情增加了相关能力的入口，帮助您快速上手。功能说明一、上传文件时支持图片处理您可以在COS控制台上传文件的同时进行图片处理，待上传的文件列表中有图片格式文件时，您可选择相应的图片处理方式，实现在COS控制台上传的

云存储

2023/05/05

2310

COS控制台进阶 - 文件快捷操作

从控制台读取password – C#

https java linux 网络安全

______________________________________________________________

全栈程序员站长

2022/07/06

8310

从控制台读取password – C#

点击加载更多

相似问题

@ngrx/effects调度操作

11

ngRx操作未正确调度

18

ngrx从effect多次调度相同的操作

10

ngrx测试方法调度操作

10

NgRx在调度操作后(异步)执行操作

11

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例