视口单位，保持纵横比？ [英] Viewport units, keeping aspect ratio?

问题描述

所以我刚刚发现了视口单元，我真的想使用它们。

第一个挑战：我的元素有一个基本大小为760x670像素。我想使用视口单位来缩放，以便高度 100vh ，或宽度 100vw

不幸的是，虽然我可以使用 100vmin 获得两者中较小的一个，

目前我使用的是：

  #root {
 width：760px; 
 height：670px; 
 width：100vw; 
 height：calc（670vw / 760）; 
} 
  

缩放宽度以适合屏幕，导致垂直滚动。

解决方案

我的意思是， ve在IE10中工作：

  #elem {
 width：100vw; 
 height：calc（（9/16）* 100vw）; 
} 
 
 @media（min-aspect-ratio：16/9）{
 #elem {
 height：100vh; 
 width：calc（（16/9）* 100vh）; 
} 
} 
  

在线演示 a href =http://jsfiddle.net/C2ZGR/show/> http://jsfiddle.net/C2ZGR/show/ （在IE10中打开（Win​​dows 7的预览版本））;

我使用了宽高比为16：9的元素，但代码可以工作对于任何宽高比 - 只需用您想要的宽高比替换 16/9 和 9/16 p>

Btw，IE10是唯一的浏览器，在这个演示将工作。 Firefox / Opera没有实现视口单元，WebKit浏览器目前有一个错误，其中 calc（）中不能使用视口单位。

So I've just discovered viewport units, and I really want to use them.

First challenge: My element has a "base size" of 760x670 pixels. I want to use viewport units to scale it up so that either the height is 100vh, or the width is 100vw, whichever is smaller.

Unfortnately, although I can use 100vmin to get the smaller of the two, I can only apply it to the width or the height, not both.

Currently I'm using:

#root {
    width: 760px;
    height: 670px;
    width: 100vw;
    height: calc(670vw/760);
}

This scales the width to fit the screen, resulting in vertical scrolling. This isn't too bad, but I'd prefer it if I could actually have it fit the viewport.

解决方案

I've made it work in IE10:

#elem {
    width: 100vw;
    height: calc((9/16)*100vw);
}

@media (min-aspect-ratio:16/9) {
    #elem {
        height: 100vh;
        width: calc((16/9)*100vh);
    }
}

Live demo: http://jsfiddle.net/C2ZGR/show/ (open in IE10 (preview version available for Windows 7); then re-size window, so that either the width, or height is very small)

I've used an element with the aspect ratio of 16:9, but the code can work for any aspect-ratio - just replace 16/9, and 9/16 with your desired aspect ratio.

Btw, IE10 is the only browser in which this demo will work. Firefox/Opera don't implement viewport units yet, and the WebKit browsers currently have a bug where viewport units cannot be used inside calc().

这篇关于视口单位，保持纵横比？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！