Maintain the aspect ratio of the div and also apply the max height and max width
I'm trying to keep the aspect ratio but also limit the maximum size. Height doesn't seem to be getting notes. Any idea why?
See this code: https://codepen.io/timsim/pen/mmRLdq
My code:
* {
box-sixing: border-box;
}
#color-picker {
width: 15%;
padding-top: 15%;
max-height: 150px;
max-width: 150px;
background-color: red;
}
<div id="color-picker"></div>
+3
source to share
1 answer
First you skip box-sizing
, and second, if padding
more than the element's height, it will increase the element's height no matter if you use border-box
orcontent-box
* {
box-sizing: border-box;
}
#color-picker {
width: 15%;
padding-top: 150px;
max-height: 150px;
max-width: 150px;
background-color: red;
}
<div id="color-picker"></div>
0
source to share