css背景圖像適應尺寸

Question

我想弄清楚如何調整背景圖像的大小，只有當它比只包含CSS的div大時。

<div id="container> 
</div> 

#container{ 
width: 100px; 
height: 100px; 
background-image: url("...myimagepath"); 
} 

如果圖像大於100x100像素，應當調整，但如果是小的，我需要保持它的中心和不適應。在我的代碼中，它的作用與小於div的圖像一致，而圖像沒有爲較大的圖像調整大小。

Answer 1

您可以通過將圖像放在位於背景中的div中來將其凍結。

所以HTML：

<div id="container> 
    <div id="background"> 
    <img src="...myimagepath"> 
    </div> 
    Container content here. 
</div> 

CSS：

#container{ 
    width: 100px;  /* Your original dimensions */ 
    height: 100px; 
    position: relative; /* Lets anything in it be positioned relative to it */ 
} 

#background{ 
    width: 100%;   /* Same width as parent container */ 
    height: 100%;  /* Ditto height */ 
    position: absolute; /* Take out of document flow. Default position 0,0 */ 
    z-index: -1;   /* Push it behind anything else in its container */ 
} 

#background img { 
    max-width: 100%;  /* Don't let it get wider than its container */ 
    max-height: 100%; /* Nor taller */ 
    display: block;  /* Lets margins be set (otherwise in-line) */ 
    position: absolute: /* Lets us position it */ 
    top: 0;    /* Put it at the top ... */ 
    left: 0;    /* on the far left ... */ 
    bottom: 0;   /* and at the bottom (makes sense later) */ 
    right: 0;   /* and the far right (ditto) */ 
    margin: auto;  /* Best compromise between left/right & top/bottom = centre */ 
} 

我似乎記得上半年有可能是奇瀏覽器不會將零的上，左，等正常。如果是這樣，請改用1px等值。