私は800x480ピクセルの背景画像を持っています。私の要素が固定サイズであるとき、私は背景画像を見るが、要素が相対的な大きさか最大幅を持っているのではない。私は背景画像を表示するために何ができるCSS:要素の相対的なサイズにより、背景画像が消える
.audio-container, .settings-container {
width:100%;
/* Same result with max-width */
height:100%;
position:absolute;
background-image:url("../../public/images/Audio/I_Audio_BGK.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
を示していない背景画像と
ワーキングCSSスクリプト
.audio-container, .settings-container {
max-width:800px;
height:480px;
position:absolute;
background-image:url("../../public/images/Audio/I_Audio_BGK.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
CSSスクリプトは、まだ要素がへの相対的なサイズ持っていますブラウザウィンドウ?以下のCSSで
<div class="settings-container"></div>
:
は要求することで、ここではここ
<div ng-controller="MainController" class="main-guy">
<div class="screen-inside">
<div class="audio-container" ng-controller="AudioController">
</div>
</div>
</div>
には、次のHTMLを使用して、親DIVのCSSスタイル .main-guy {
position:absolute;
/* Same result if width and height are set to a fixed number */
width: 100%;
height: 100%;
margin: auto;
}
.screen-inside {
margin:auto;
position:relative;
height:60%;
width:66.66%;
}
は、問題を実証助けるためにあなたのHTMLコードを記載してください。あなたの2番目の(動作しない)例では、どの祖先が幅と高さを決定しますか?私。何の100%? – showdev
'position:absolute'を' position:relative'に変更しても動作します。 –
@ M.Tanzil理由を説明するのに気をつけますか? – showdev