css background image адаптировать размер

Question

Я пытаюсь выяснить, как изменить размер фонового изображения, только если он больше, чем div, который содержит его, используя только CSS.

<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.