您需要使用background-image属性来定义背景图像。
所以这行不通
<img class="image" style="background: url(image.jpg);" />
.image { background-size: cover; }
因为background是简写代码，并且对所有省略的参数采用默认值。
但如果你这么做
<img class="image" style="background-image: url(image.jpg);" />
.image { background-size: cover; }
这将解决问题。

div的高度可以使用css height属性设置，或者（默认情况下）由它的子元素的高度决定。由于图像被设置为背景图像，div无法根据背景图像来确定它应该具有的高度，并且没有纯css方法来调整div的高度以适应背景图像的尺寸。您可以做的是，将背景图像设置为位于div的中心，并将背景大小设置为cover：

.pattern-container .pattern {
    background-size: cover;
    background-position: 50% 50%;
    <!-- other rules here -->
}

将背景图像垂直和水平定位为50% 50%会使其在包含div中居中，而不管div的尺寸如何。也就是说，如果div的纵横比小于图像的纵横比，则图像本身可能会在边缘处裁剪（例如，如果div是30px宽和10px高，而图像是40px宽和10px高，则图像将从两侧损失5px）。

您可以使用;

background: url('/path');
background-size: cover;

//在样式表中

在某些情况下，图像本身的边缘可能会有空白（例如，一个图标被每边16px的空白包围），这使得background-size: cover;看起来不工作，而实际上它是工作的。
只是提醒你仔细检查你的源图像：）

图像框是有响应的，但这并不意味着对应的图像也是有响应的。对于更流畅和动态的结构，我建议使用一个为您完成这项工作的框架，比如Bootstrap。
在最新版本的Bootstrap中，您可以使用以下代码创建响应图像（包括宽度和高度）：

<img src="images/my_img" class="img-responsive" />

为了使此工作，您将需要从他们的网站（http://getbootstrap.com/）下载最新版本的Bootstrap，并在您的代码中引用。

背景尺寸：需要在背景之后：我不知道是否所有的浏览器都是如此，但这肯定是Chrome的一个功能，它可以让你发疯。

这可能有点晚，但在某些情况下，必须添加background-attachment: fixed;才能使background-size: cover;工作。