填充最大高度

Question

我尝试为容器添加 max-height 以定义其高度，但有一个最大高度不超过更高分辨率的限制。但是使用 max-height 在这里不起作用，我不知道为什么：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    .wrapper {
      width: 100%;
      padding-bottom: 39.65%;
      max-height: 200px;
      height: 0;
      box-sizing: border-box;
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <img src="https://image.shutterstock.com/image-vector/sample-red-square-grunge-stamp-260nw-338250266.jpg">
  </div>
</body>
</html>

编辑： 使用这种方法无法限制高度，因此我使用 height 和 vw。

.wrapper {
  height: 39.65vw;
  max-height: 200px;
  /* ... */
}

Answer 1

max-height 和 padding 是 2 个不同的属性。最后一个不受第一个限制或影响。

因此，要限制框的总高度，您需要计算 200px 是父宽度的 39.65%。假设这是当宽度为 ~504px 时发生的整个视口。那时使用媒体查询，您只需将 padding-bottom 设置为 200px;

.wrapper {
   width: 100%;
   padding-bottom: 39.65%;
   height: 0;
   box-sizing: border-box;
}

@media all and (min-width: 504px) {
   padding-bottom: 200px;
}

填充最大高度

padding with max height

html

css

height