純粋なCSSを使用して、ビューポートの幅と縦横比に基づいて縮尺を計算する方法は？

Question

私は16：9のアスペクト比を固定したこの容器を持っています。 このコンテナには、幅に基づいて高さが7.81％の別のコンテナがあります。私が達成したいのは、ビューポートの幅に基づいてこのコンテナの内容を拡大/縮小し、縦横比を維持することです。 基本サイズは1280ピクセルです。したがって、ウィンドウが640ピクセルの場合、スケールは0.5になります。 Calcただし、浮動小数点値は返されません。スケールがcalcで正しく機能していない。これを達成する別の方法がありますか？

これはJavaScriptで可能ですが、これを避けたいと思います。

JsFiddle：https://jsfiddle.net/qdc05hqm/

<style> 
.outer-container { 
    width: 100vw; 
    height: 56.25vw; 
    max-height: 100vh; 
    max-width: 177.78vh; 
    background: #cc00cc; 
    position:relative; 
} 

.inner-container { 
    background: #333; 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    height: 7.81vw; 
} 

.content { 
    color: #FFF; 
    transform: scale(calc(1280px/100vw)); <--- Does not work. 
} 
</style> 

<div class="outer-container"> 
    <div class="inner-container"> 
    <div class="content"> 
     This text and other stuff should be scaled based on the viewport width 
    </div> 
    </div> 
</div> 

Answer 1

使用

.content{ font-size:calc(10px + 0.3vw) }

が、これはあなたを助けることを願っています。