視口單位，保持長寬比？

所以我剛剛發現了視口單元，我真的很想用它們。視口單位，保持長寬比？

第一個挑戰：我的元素的「基本尺寸」爲760x670像素。我想使用視口單位來放大它，以便高度爲100vh或寬度爲100vw，以較小者爲準。

不幸的是，雖然我可以使用100vmin來得到兩者中較小的一個，但我只能將它應用於寬度或高度，而不是兩者。

目前我使用：

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

這縮放寬度以適合屏幕，從而導致垂直滾動。這不是太糟糕，但如果我真的能夠適合視口，我更喜歡它。

來源

2013-01-02 Niet the Dark Absol

我在Chrome中測試。看起來'vw'單位不能在'calc'裏面使用。我嘗試了諸如'height：-webkit-calc（100vw/3）'之類的東西。唯一支持'calc'和viewport單位的瀏覽器是IE10和Safari6，兩者都不能安裝在我的平臺上（Windows 7）。 –

順便說一句，這應該是可能的媒體查詢，因爲你可以分支代碼基於長寬比例如， '@media all和（min-aspect-ratio：760/670）{...}'。 –

這是[WebKit bug]（https://bugs.webkit.org/show_bug.cgi?id=94158）。所以忘掉Chrome/Safari。 Firefox/Opera甚至不實現視口單元。看來，IE10是理解你的代碼的唯一瀏覽器。 '：）' –

我做了它在IE10工作：

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

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

現場演示：http://jsfiddle.net/C2ZGR/show/（在IE10（預覽可用於Windows 7）版本中打開;然後重新大小的窗口，以使這些寬度，或者高度非常小）

我已經使用了寬高比爲16：9的元素，但代碼可以用於任何寬高比 - 只需將16/9和9/16替換爲所需的長寬比。

順便說一句，IE10是這個演示程序工作的唯一瀏覽器。 Firefox/Opera尚未實現視口單元，而WebKit瀏覽器目前存在一個缺陷，在calc()之內無法使用視口單元。

來源

2013-01-19 22:42:48

非常好。謝謝。 –

這似乎可以在Chrome中使用。 – BlueMonkMN

視口單位，保持長寬比？

回答

相關問題