Question

图像框的宽度是响应

如何设置高度响应？像50％的屏幕？

如果我做了这个改变：

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

它不能正常工作

非常感谢！

Answer 1

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

Answer 2

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

可以使用css height属性设置div的高度，或者（默认情况下）使用其子元素的高度设置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

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

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

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

为了实现这一点，您需要从他们的网站（http://getbootstrap.com/）下载最新版本的Bootstrap并在您的代码中引用。

Answer 5

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

Answer 6

您可以使用;

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

//在样式表中

Answer 7

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