css - 使用 CSS 随意调整图像大小？

Question

我正在尝试调整背景图像的大小，以使其保留其父元素(文本区域)的 100% 高度和宽度。我希望图像能够动态调整和更改宽高比，就像文本区域一样。我有以下 CSS，html 只是一个 textarea 标签。

textarea {
margin-left: 50px;
margin-top: 50px;
width: 500px;
height: 100px;
background: url(http://gfx9.com/images/contents/b/e/beautiful-cartoon-landscapes-vector-set-14-free0.jpg) no-repeat;
background-size:100%;
border-radius: 5px

使用此代码，图像水平调整大小，但我希望它在水平和垂直方向都调整大小，填充该区域中的所有空白区域。

希望有人能想出解决办法。

Answer 1

您需要指定两个值，因为现在它只捕获第一个值(即宽度)。像这样:

div {
    background-size: 100% 100%;
}

如果需要具体，也可以使用 px。此外，还有另一个名为 cover 的值，它会将背景图像缩放到尽可能大。