響應背景圖片內的圖像

Question

在一起，我想讓它有內包裝的IMG一個div的響應背景圖片： 事情是這樣的：

我使用的引導。 下面是HTML：

<div class="col-lg-5 col-md-5 col-sm-10 col-xs-10"> 
    <div class="device-laptop"> 
    <img src="img/test.jpg"/> 
    </div> 
</div> 

這裏是CSS：

device-laptop{ 
    background: url('../img/macpro.jpg') no-repeat; 
    width: 363px; 
    height: 208px; 
    padding: 12px 45px 23px 43px; 
    background-size:100%; 
} 

.device-laptop img{ 
    width: 274px; 
    height: 172px; 
} 

這是正常的形式。現在我想讓這個響應如此，當背景圖像被改變時，圖像裏面也會改變。無論如何要實現這一目標？

我想：

.device-laptop{ 
    background: url('../img/macpro.jpg') no-repeat; 
    /*width: 363px;*/ 
    background-size:100%; 
    height: 208px; 
} 

這使得背景圖像響應，但我怎樣才能使也形象去的背景一個平行？ Thnx

Answer 1

編輯：奇數，從提供的CSS看來，.device-laptop是固定的寬度和高度。不知道它將如何流體呢？

不管怎樣，利用由@papa

提到background-size:contain選項。如果你確定與改變您的標記。以下將完成這項工作。

小提琴：http://jsfiddle.net/Varinder/wf3U8/1/

HTML

<div class="some-awesome-laptop"> 
    <div class="some-awesome-wallpaper-wrapper"> 
     <img src="http://placehold.it/250x150&text=text" class="some-awesome-wallpaper" /> 
    </div> 
</div> 

CSS

.some-awesome-laptop { 
    background-image:url("http://placehold.it/270x180/aaa&text=a"); 
    background-repeat:no-repeat; 
    width:270px; 
    max-width:100%; 
    margin:0 auto; 
    height:0; 
    overflow:hidden; 
    padding-bottom:66%; /* aspect ratio of the image: (180/270)*100 */ 
    position:relative; 

    -webkit-background-size:contain; 
    -moz-background-size:contain; 
    background-size:contain; 

} 

.some-awesome-wallpaper-wrapper { 
    padding:10px; 
} 

.some-awesome-wallpaper { 
    max-width:100%; 
    display:block; 
} 

Answer 2

使用background-size:cover或background-size:contain來滿足您的需求。封面可能是更好的選擇。