如何強制圖片背景以適合較小的div中心

<div id="img-frame"> 
<img src="mypathimg.png"/> 
</div>

使用img 100％將工作，但它不像Facebook，它收縮但顯示圖像的中心。如何強制圖片背景以適合較小的div中心

來源

2013-12-20 user3106579

你試過：

<div id="img-frame"> 
    <div style="background:url(mypathimg.png) 100% 100%;" /> 
</div>

來源

2013-12-20 01:27:38 Karla

你可以嘗試：

<div id="img-frame"> 
    <div style="background-size: cover;" /> 
</div>

來源

2013-12-20 01:28:31

您還可以設置圖像的寬度和高度爲100％，如果你不希望它作爲背景圖片。你可能需要提供一個你到目前爲止的例子，並且要更具體。

#img-frame{ 
    width:100px; 
    height:100px; 
} 

#img-frame img{ 
    width:100%; 
    height:100%; 
}

來源

2013-12-20 01:29:14 Andrew

由於沒有其他的答案是完整的，改變標記來：

<div id="img-frame"> 
    <div style="background-image:url(yoururl.png)" class="img"></div> 
</div>

現在添加CSS：

.img-frame > .img { 
    background-size:cover;  /* Scale to fit optimistically */ 
    background-position:center; /* Scale from center */ 
    width:100%;     /* Same width as parent */ 
    height:100%;     /* Same height as parent */ 
}

來源

2013-12-20 01:45:50

你可以使用CSS3規則：背景大小

<div id="img-frame"> 
<div style='background:url(mypathimg.png) ;background-size:contain;' ></div>

來源

2013-12-20 01:57:02 xcchcaptain

如何強制圖片背景以適合較小的div中心

回答

相關問題