web-dev-qa-db-ja.com

幅/高さの比率を計算するためにCSS calc（）を使用することは可能ですか？

これは私が現在持っているコードです（まだ動作しません）：

HTML：

<div class="chi_display_header" style="background-image:url('http://localhost/.../header-dummy-small.png');"></div>

CSS：

.chi_display_header {
    background-size:contain;
    width:100%;
    min-height:100px;
    height:calc(1vw * 270 / 1280px);
    max-height:270px;
    max-width:1280px;
    margin:0 auto;
}

これは、中央に配置されたレスポンシブな背景画像です。コンテナの幅と高さは可変である必要があり、jQueryは使用しません。

既知のプロパティ：

比率：1280：270

最小の高さ：100px

最大高さ：270px

最大幅：1280px

私がやろうとしているのは、calcで.chi_display_headerのコンテナの高さを魔法のように計算することです：

height = calc（CURRENT_SCREEN_WIDTH * 270/1280）;

しかし、私の現在のアプローチ

height:calc(1vw * 270 / 1280px);

まだ機能しません。 CSSソリューションはありますか？

csscss3calc
11
Blackbam

ソリューション（ty 4コメント）：

.chi_display_header {
    background-size:cover;
    width:100%;
    min-height:100px;
    height:calc(100vw * 270.0 / 1280.0);
    max-height:270px;
    max-width:1280px;
    margin:0 auto;
}
11
Blackbam

Blackbamのソリューションを、divがボディに配置され、ボディに15pxの左右のパディングがある状況に適用しました。計算された高さから左右のパディングの合計（30px）を引くと、divの上下にある空白が削除されました。

height:calc(100vw * aspect_ratio - 30px);
3
LJaeren

calc()なしでもこれを行うことができます。 padding（-topおよび-bottomでさえ）は要素の幅に関連するため、同じ効果を得ることができます。

.chi_display_header {
    background-size: cover;
    width: 100%;
    min-width: 474px;
    max-width: 1280px;
    height: 0;
    padding-bottom: 21.09375%;
}

相対/絶対トリックを使用して、内部の<div>を使用して内部に要素を追加することもできますが、コンテンツが収容高さを超えると問題が発生し始めます。

.chi_display_header {
    ...
    position: relative;
}

.chi_display_header .inner {
    position: absolute;
    top: 0; left: 0; right: 0;
    padding: 15px;
}
1
rgchris