保持div的宽高比，但在CSS中填充屏幕宽度和高度？

2018-07-01 23:38:42

我有一个网站可以放置在一起，它具有大约16:9的固定宽高比，如视频。

我想让它居中并扩展以填充可用宽度和可用高度，但不要在任何一边增大。

例如：

高而薄的页面会使内容在整个宽度上保持一定的高度。

一个短的宽页面可以将内容拉伸到整个高度，并具有相应的宽度。

有两种方法我一直在看：

使用具有正确宽高比的图像来扩展容器div ，但是我无法让它在主流浏览器中以相同的方式运行。

设置比例底部填充，但只对宽度起作用并忽略高度。它随着宽度不断变大并显示垂直滚动条。

我知道你可以很容易地用JS来做到这一点，但我想要一个纯粹的CSS解决方案。

有任何想法吗？

使用新的CSS视口单位vw和vh （视口宽度/视口高度）

小提琴

垂直和水平调整大小，你会发现元素将始终填充最大的视口大小，而不会破坏比例和没有滚动条！

（PURE）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>

只需在LESS mixin中重新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;
}

我的原始问题是如何都有一个固定的方面的元素，但要适应在一个指定的容器内，这使得它有点烦琐。如果你只是想要一个单独的元素来保持它的宽高比，那就容易多了。

我遇到的最好的方法是给元素零高度，然后使用百分比填充底部给它的高度。百分比填充总是与元素的宽度成正比，而不是其高度，即使其顶部或底部填充。

W3C填充属性

因此，利用这一点，可以给一个元素一个百分比宽度来放置在一个容器中，然后使用填充来指定宽高比，或者用其他方式指定宽度和高度之间的关系。

.object {
    width: 80%; /* whatever width here, can be fixed no of pixels etc. */
    height: 0px;
    padding-bottom: 56.25%;
}
.object .content {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding: 40px;
}

所以在上面的例子中，对象占用了容器宽度的80％，然后它的高度是该值的56.25％。如果它的宽度是160px，那么底部填充，因此高度将是90px - 16：9方面。

这里的轻微问题对您来说可能不是问题，因为您的新对象内没有自然空间。例如，如果您需要放入一些文本，并且该文本需要将其填充为自己的填充值，则需要在其中添加一个容器并在其中指定属性。

此外，某些较旧的浏览器不支持vw和vh单元，因此我的问题的接受答案可能不适用于您，您可能需要使用更低保真的东西。

链接地址: http://www.djcxy.com/p/89169.html

上一篇: Maintain aspect ratio of div but fill screen width and height in CSS?

下一篇: How to scale a background image without losing proportions