时间戳

首页 > 解决方案 > 具有最大高度的填充

html - 具有最大高度的填充

问题描述

我尝试添加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;
  /* ... */
}

标签： htmlcssheight

解决方案

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;
}

推荐阅读