背景大小:封面不起作用？

Question

图像框的宽度是响应的

如何设置高度也要响应？像50%的屏幕？

如果我做这个改变:

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

它不起作用

非常感谢你!

Answer 1

background-size:需要在后台进行:我不知道所有浏览器是否都是这样,但它肯定是Chrome的一个功能,可以让你发疯.

只是为了解释为什么这可以解决问题-“ background”属性会自动为一系列其他背景属性（例如“ background-position”，“ background-size”等）设置默认值**如果您未指定它们，那么* *在`background`声明中。因此，如果您在“背景”之前设置了“背景大小”，那么“背景”将覆盖您的“背景大小”属性，因为这就是CSS的工作方式；一个在另一个属性之后设置的属性将覆盖它，如果未在background中专门设置，则background-size的默认值为auto。这不是一个bug :) (3认同)

Answer 2

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

Answer 3

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

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

50% 50%无论 div 的尺寸如何，将背景图像垂直和水平放置在包含的 div 中。也就是说，如果 div 的纵横比小于图像的纵横比（例如，如果 div 为 30px 宽和 10px 高，并且图像为 40px 宽和 10px 高，则图像本身可能会在边缘裁剪，然后图像将从两侧丢失 5px）。

Answer 4

您需要使用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; }

这将解决问题。

Answer 5

图像框是响应式的，但这并不意味着相应的图像也是响应式的。为了获得更加流畅和动态的结构，我建议使用适合您的框架，例如 Bootstrap。

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

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

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