背景画像を画面のサイズにする

-1

背景画像を画面いっぱいにして、アスペクト比を失う心配はありません。すべて、私は明らかに何かを欠けているとは思わない...背景画像を画面のサイズにする

HTMLを揃えています：

.phone { 
 
    margin: auto; 
 
    height: 737px; 
 
    width: 654px; 
 
    background-image: url("/imgs/phone.png"); 
 
    position: fixed; 
 
    top: 50%; 
 
    left: 50%; 
 
    display: block; 
 
} 
 

 
.container { 
 
    position: fixed; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    margin: auto; 
 
    height: 536px; 
 
    width: 350px; 
 
    border: 1px solid; 
 
    border-radius: 5px; 
 
    display: block; 
 
} 
 

 
iframe { 
 
    width: 350px; 
 
    /* adjust to your needs */ 
 
    max-width: 100%; 
 
    /* to make it responsive */ 
 
} 
 

 
body { 
 
    background-image: url("/imgs/CV.png"); 
 
    background-repeat: no-repeat; 
 
    background-size: auto; 
 
    margin: 0; 
 
    height: 100%; 
 
    min-height: 100%; 
 
} 
 

The CSS:

body { 
 
    background-color: #93B874; 
 
    } 
 
</style> 
 

 
<body> 
 
    <div className="phone" style="margin:auto; height: 630px;width: 558px; background-image:url(/imgs/phone.png); top:50%; left:50%;"> 
 
    <div className="container"> 
 
     <iframe style="height: 458.18px; width: 290px; margin: auto; position: relative; top: 85px; left: 132px;" src="http://foodsharing-production.herokuapp.com"></iframe> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

プレビュー： http://soupedupkitchencom.fatcow.com/CV/CV.html

出典

2017-12-12 ClaaziX

の元のサイズを参照してくださいどちらも、あなたのコード – Justinas

はbody

のルールに background-size: coverを追加

また、背景画像全体が表示されているかどうかを確認したい場合は、歪んだイメージを使用することができますbackground-size: 100% 100%;

ここにあなたのコードのスニペットがあります。あなたは（あなたがそれを持っていたとして）autoにbodyの背景サイズをバック変更する場合は、プレースホルダ画像

.phone { 
 
    margin: auto; 
 
    height: 737px; 
 
    width: 654px; 
 
    background-image: url("/imgs/phone.png"); 
 
    position: fixed; 
 
    top: 50%; 
 
    left: 50%; 
 
    display: block; 
 
} 
 

 
.container { 
 
    position: fixed; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    margin: auto; 
 
    height: 536px; 
 
    width: 350px; 
 
    border: 1px solid; 
 
    border-radius: 5px; 
 
    display: block; 
 
} 
 

 
iframe { 
 
    width: 350px; 
 
    /* adjust to your needs */ 
 
    max-width: 100%; 
 
    /* to make it responsive */ 
 
} 
 

 
body { 
 
    background-image: url("http://placehold.it/200x150/fa0?text=this is an image"); 
 
    background-repeat: no-repeat; 
 
    background-size: 100% 100%; 
 
    margin: 0; 
 
    height: 100%; 
 
    min-height: 100%; 
 
} 
 

 
The CSS:

<body> 
 
    <div className="phone" style="margin:auto; height: 630px;width: 558px; background-image:url(/imgs/phone.png); top:50%; left:50%;"> 
 
    <div className="container"> 
 
     <iframe style="height: 458.18px; width: 290px; margin: auto; position: relative; top: 85px; left: 132px;" src="http://foodsharing-production.herokuapp.com"></iframe> 
 
    </div> 
 
    </div> 
 
</body>

出典

2017-12-12 15:11:14 Johannes

をフォーマットするSOスニペットを使用しないでください。それらのソリューションのうち – ClaaziX

が動作しました - 私が追加したスニペットに注意してください – Johannes

背景画像を画面のサイズにする

答えて

関連する問題