Question

我正在试图弄清楚如何仅使用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 */
}

我似乎有一半记得可能有奇怪的浏览器没有正确处理top，left等的零。如果这是真的，请使用类似1px的值。

css背景图像适应维度

1 个答案: