CODEWITHSUNDEEP
htmlcssheight
Code Spirit
Code Spirit

Reputation: 5051

padding with max height

Ive tried adding max-height for a container to define its height but have a maximum height to dont exceed limits on higher resolutions. But using max-height is not working here and I dont know why:

<!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>

EDIT: It was not possible to limit the height with this approach so I used height with vw.

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

Upvotes: 1

Views: 2894

Answers (1)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

max-height and padding are 2 different properties. The last one won't be limited or affected by the first one.

So, to limit the overall height of the box you need to compute when 200px is the 39.65% of your parent width. Assuming this is the whole viewport that happens when the width is ~504px. At that point with a mediaquery you just set the padding-bottom to 200px;

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

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

Upvotes: 1

Related Questions