保持div的纵横比，但在CSS中填充屏幕的宽度和高度？
保持div的纵横比，但在CSS中填充屏幕的宽度和高度？
提问于 2013-12-15 09:24:51
我有一个网站放在一起，有一个固定的纵横比约16:9景观，就像一个视频。
我想让它居中并扩展，以填满可用宽度和可用高度，但永远不会在两边变大。
为例：
- 又高又细的页面，其内容将拉伸整个宽度，同时保持一定比例的高度。
- 短而宽的页面，其内容将拉伸整个高度，并保持一定比例的宽度。
我一直在研究两种方法：
- 使用具有正确纵横比的图像来展开容器
div，但我无法让它在主要浏览器中以相同的方式运行。 - 设置成比例的底部填充，但这只相对于宽度起作用，而忽略高度。它只会随着宽度的增加而变大，并显示垂直滚动条。
我知道你可以用JS很容易做到这一点，但我想要一个纯CSS解决方案。
有什么想法吗？
回答 9
Stack Overflow用户
回答已采纳
发布于 2016-01-25 07:35:51
现在指定了一个新的CSS属性来解决这个问题：object-fit。
https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
该功能目前已得到广泛支持(http://caniuse.com/#feat=object-fit)。
Stack Overflow用户
发布于 2013-12-15 18:03:22
使用新的CSS viewport units vw和vh (视口宽度/视口高度)
垂直和水平调整大小，您将看到元素将始终填充最大视口大小，而不会破坏比例和滚动条！
(纯) CSS
div
{
width: 100vw;
height: 56.25vw; /* height:width ratio = 9/16 = .5625 */
background: pink;
max-height: 100vh;
max-width: 177.78vh; /* 16/9 = 1.778 */
margin: auto;
position: absolute;
top:0;bottom:0; /* vertical center */
left:0;right:0; /* horizontal center */
}
* {
margin: 0;
padding: 0;
}
div {
width: 100vw;
height: 56.25vw;
/* 100/56.25 = 1.778 */
background: pink;
max-height: 100vh;
max-width: 177.78vh;
/* 16/9 = 1.778 */
margin: auto;
position: absolute;
top: 0;
bottom: 0;
/* vertical center */
left: 0;
right: 0;
/* horizontal center */
}<div></div>
如果您想使用视口的最大宽度和高度，比如90%：
* {
margin: 0;
padding: 0;
}
div {
width: 90vw;
/* 90% of viewport vidth */
height: 50.625vw;
/* ratio = 9/16 * 90 = 50.625 */
background: pink;
max-height: 90vh;
max-width: 160vh;
/* 16/9 * 90 = 160 */
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}<div></div>
此外，浏览器的支持也很好: IE9+，FF，Chrome，Safari- caniuse
Stack Overflow用户
发布于 2014-07-23 02:00:15
只是在更少的混合中重新制定Danield的答案，以供进一步使用：
// Mixin for ratio dimensions
.viewportRatio(@x, @y) {
width: 100vw;
height: @y * 100vw / @x;
max-width: @x / @y * 100vh;
max-height: 100vh;
}
div {
// Force a ratio of 5:1 for all <div>
.viewportRatio(5, 1);
background-color: blue;
margin: 0;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20590239
复制相关文章
相似问题
腾讯云开发者
