使用 CSS 随意调整图像大小？答案

【问题标题】：Resizing an image at will with CSS?使用 CSS 随意调整图像大小？
【发布时间】：2015-02-27 11:53:19
【问题描述】：

我正在尝试调整背景图像的大小，使其保留其父元素（文本区域）的 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

}

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

希望有人能提出解决方案。

【问题讨论】：

background-size: cover; 或 background-size: 100% 100%;
不适用于cover，图像溢出区域，但100% 100%。我不知道您可以为背景大小指定两个值。感谢您的快速解决方案。
@devqon 请将您的建议添加为答案，以便 SoKeT 将其选为正确答案。

标签： css image resize height width

【解决方案1】：

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

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

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

【讨论】：

欢迎来到 StackOverflow！您可能没有意识到，当您有多行代码时，您可以将其显示为带有语法突出显示的代码块，而不是内联代码。请参阅help center 了解更多信息。