HTML - CSSをイメージをフレームに入れる

Question

イメージをフレームに入れる（フレームはiPhone Picture）。

私はそのイメージがiPhoneの画面のように思えます。ビューのCSSの観点から

は、これを行うに十分である：

各画像はiphoneの背景（iphone_bk.png）を有し、パディングがの画面に正確に合わせるために調整しなければならない

> img.pic{padding:100px; background: url(iphone_bk.png) no-repeat} 

iphone。

提案がありますか？

Answer 1

position:relative;を画面に使用できます。あなたは.iphone .screenセレクタ

背景画像と青色の背景を変更することができます http://jsbin.com/epewi3

：

HTML

<div class="iphone"> 
    <div class="screen"></div> 
</div> 

CSS

.iphone { 
    background:url(iPhone-Screen-001.png) no-repeat; 
    height: 371px; 
    width: 200px; 
} 
.iphone .screen { 
    width:155px; 
    height:223px; 
    background:#39F; 
    position:relative; 
    top:76px; 
    left:22px; 

} 

実際の例210

Answer 2

私はiPhoneの画像のサイズだdivを使用して、あなたが上記の行ったように、background: url(iphone_bk.png) no-repeatを背景として、携帯電話の画像を設定したいです。私は、その後のdiv内imgタグを入れて、このように、 '画面' 画像を保持するためにそれを使用したい：

HTML：

 
<div id="container"> 
    <img src="img.png"> 
</div> 

CSS：

 
#container 
{ 
    background: url(iphone_bk.png) no-repeat 
    padding: 10px 5px 5px 10px   // Change this to whatever padding makes 
             // your 'screen' image fit the iPhone image 
} 

Answer 3

はい、それは動作します。

上、右、下、左の罫線に別々のパディングを指定することができます。これは、電話機イメージに画面領域を配置するのに便利です。例：

img.pic { 
    padding: 30px 10px 50px 10px; 
    background: url(iphone_bk.png) no-repeat; 
    width: 120px; 
    height: 200px; 
}