Question

我正试图让这些div最多500px乘500px。即使设置max-width和max-height属性，它仍会占用整个页面加上一些高度。我希望背景图像能够响应并保持其纵横比。我读到如果你将高度除以宽度然后乘以100，你得到用作padding-top属性的百分比。在我的情况下，500/500是1并且乘以100很好，100％。任何帮助或建议将不胜感激。

HTML：

<html>
    <body>
        <div></div>
        <div></div>
    </body>
</html>

CSS：

body {
  width: 80%;
  height: 100%;
}

div {
  width: 40%;
  max-width: 500px;
  padding-top: 100%;

  background-image: url(http://placehold.it/500x500);
  background-repeat: no-repeat;
  background-position: center center;

  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

  margin: 2.5%;

  float: left;
}

Answer 1

您有max-width: 500px，然后使用background-size: cover覆盖它。如果您要使用background-size: cover，则应在div内添加第二个div，并在该嵌套background-size: cover上使用该div样式，以便涵盖父div，最大宽度为500px。

例如：

<div class="parent">
  <div class="child">
  </div>
</div>

.parent {max-width: 500px}
.child {background-size: cover; //include image}

没有测试代码，但你得到了它的要点。

响应的背景图像与响应的高度和宽度

1 个答案: