Css 背景尺寸：封面不起作用？

这是我的页面

图像框的宽度是有响应的

如何设置高度以使其也具有响应性？比如50%的屏幕

如果我做了此更改：

.pattern{
    background-size: contain;
    margin-bottom:25px;
    width:100%;
    height:50%; 
}

它不起作用了

---

多谢各位

图像框是响应的，但这并不意味着相应的图像是响应的。对于一个更加流畅和动态的结构，我建议使用一个框架来为您完成工作，比如Bootstrap

在最新版本的Bootstrap中，您可以使用以下代码制作响应图像（宽度和高度）：

---

要使其正常工作，您需要从他们的网站（）下载最新版本的Bootstrap并在代码中引用。

可以使用css

height

属性设置div的高度，或者（默认情况下）通过其子元素的高度设置div的高度。由于图像被设置为背景图像，div无法确定它应该从中选择的高度，并且没有调整div高度以适应背景图像尺寸的纯css方法。您可以做的是将背景图像设置为位于div的中心，并将背景大小设置为封面：

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

.pattern容器.pattern{
背景尺寸：封面；
背景位置：50%50%；
}

---

将背景图像定位为

50%50%

垂直和水平居中于包含的div中，而不考虑div的尺寸。也就是说，如果div的纵横比小于图像的纵横比，则图像本身可能会在边缘裁剪（例如，如果div为30px宽10px高，图像为40px宽10px高，则图像将从两侧丢失5px）.

背景大小：需要在背景之后：我不知道这是否适用于所有浏览器，但这肯定是Chrome的一项功能，它会让你发疯。

你需要使用

背景图像

属性来定义背景图像

所以这行不通

.image{背景尺寸：封面；}

因为background是速记代码，所有省略的参数都采用默认值

但是如果你这样做

.image{背景尺寸：封面；}

---

这将解决问题。

这可能有点晚，但在某些情况下，有必要添加

背景附件：修复；

以获得

背景尺寸：封面；

工作。

使用“背景尺寸：封面”；以及 检查“后台附件”参数。它不应具有“固定”值！

您可以使用

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

---

//在样式表中

您希望背景尺寸：封面起作用，还是希望框的高度为屏幕的50%？这里有两个不同答案的问题：）OP使用背景图像，而不是内联图像。问题是询问背景：封面；和每个分区的高度。不用担心：）如果这是正确的答案，您可以单击勾号将其标记为已接受的答案：）这解决了我的背景图像拒绝覆盖分区的问题。谢谢！这件事困扰了我整整20分钟，我正朝着疯狂的方向走去；）在设置图像后添加它，就像设置

一样！重要信息

。这也救了我一命。背景重要的是，我们也没有解决它。chrome没有报告任何错误。只需移动背景：url（）；在背景大小修正之前。奇怪。只是为了解释为什么这可以解决问题，

background

属性会自动为一系列其他背景属性设置默认值，例如

background position

、

background size

，如果您没有在

background

声明中指定它们的话。因此，如果在

background

之前设置了

background size

，那么

background

将覆盖

background size

属性，因为CSS就是这样工作的；在另一个属性之后设置的属性将覆盖它，如果在

background

中未专门设置，则

background size

的默认值为

auto

。这不是一个bug：）我从未见过这样使用图像标签？以这种方式使用图像标签有什么缺点吗？

background

是简写代码，它是

background的缩写：bg color bg image position/bg size bg repeat bg origin bg clip bg attachment initial | inheritbackground: url('/path');
background-size: cover;