Change element height versus width in HTML / CSS

Question

The width of an element changes as you type text between its tags. My question is that I want some kind of ratio of width to height. As the width increases, the height increases by the same, but I do not want the height to exceed 35 pixels or start from less than 5 pixels.

The code I tried:

HTML:

<div class="btn bg-red">This buttons width expands as I write more and more text.</div> 

CSS

 .btn { padding-left: 10px; padding-right: 10px; display: inline-block !important; border-radius: 6px; color: #ffffff; padding-top: 10px; padding-bottom: 10px; height: relative; } .bg-red{background-color:#F55C58;} .bg-red:hover{background-color:#F44946} 

I'm not sure if this is possible in CSS for this.

Then I tried this:

HTML:

 <div class="btn bg-red"><div class="auto">This buttons width expands as I write more and more text.</div></div> 

CSS

 .btn { padding-left: 10px; padding-right: 10px; display: inline-block !important; border-radius: 6px; color: #ffffff; padding-top: 10px; padding-bottom: 10px; } .auto { height: 20% } .bg-red{background-color:#F55C58;} .bg-red:hover{background-color:#F44946} 

JavaScript:

 var cw = $('.auto').width(); $('.auto').css({'height':cw+'px'}); 

The second code does not seem to match display:inline . It works when you change the code manually.

Find a demo for the first code here .

Find a demo for the second code here .

Edit:

Understandable value: when a button / element has less text, the width is small and the same, the height should act the same, but 20% less pixels. When the text increases, the width increases, and the height also increases. The maximum height length can reach 35 pixels, but the default width is infinite by default.

Answer 1

I do not know how you add text to your div. In any case, in the following snippets, the eventlistener trigger has an input value, since it is a contenteditable div (text is added by the user keyboard).

Fragment # 1:

 document.getElementsByTagName("body")[0].onload=function(){equalize()}; var target = document.getElementById("target"); target.addEventListener("input", equalize); function equalize() { var x = target.offsetWidth; target.style.height = x + "px"; } 

 #target { display: inline-block; background: skyblue; } 

 <div id=target contenteditable="true">write here</div> 

This second fragment is the same as the previous one, but now the height is 20% less than the width (it was equal to the previous example) plus the maximum height limit of 100 pixels.

Fragment # 2:

 var target = document.getElementById("target"); document.getElementsByTagName("body")[0].onload=function(){equalize()}; target.addEventListener("input", equalize); function equalize() { var x = target.offsetWidth; var reducedpart = x / 100 * 20; var result = x - reducedpart; if (result > 100) { var result = 100; } target.style.height = result + "px"; } 

 #target { display: inline-block; background: skyblue; } 

 <div id=target contenteditable="true">write here</div> 

Similar to the previous one, but using padding instead of height so that the text is in the center:

Fragment # 3:

 var target = document.getElementById("target"); document.getElementsByTagName("body")[0].onload=function(){equalize()}; target.addEventListener("input", equalize); function equalize() { var x = target.offsetWidth; var reducedpart = x / 100 * 20; var result = x - reducedpart; if (result > 100) { var result = 100; } var secresult = result / 2; target.style.paddingTop = secresult + "px"; target.style.paddingBottom = secresult + "px"; } 

 #target { display: inline-block; background: skyblue; padding-left: 15px; padding-right: 15px; } 

 <div id=target contenteditable="true">write here</div> 

CSS-only workaround using padding instead of height :

Fragment # 4:

 .container { vertical-align: bottom; display: inline-block; } #a { width: 100%; padding-bottom: calc(80% - 1em); background: gold; } #b { width: 100%; padding-top: calc(40% - 0.5em); padding-bottom: calc(40% - 0.5em); background: tomato; } 

 <div class=container><div id=a contenteditable="true">write here</div></div> <div class=container><div id=b contenteditable="true">write here</div></div> 

Answer 2

There is a .height () function in jquery that gets the current calculated height for the html element in a given ID or class. Having received the height value of your div.auto , you can control the height increase. Given this, you can make the condition if ($('.auto').height() <= 35px) , which limits it to 35px.

Put this <script type="text/javascript" src="jquery-1.12.2.js"></script> in your <head> and you have the latest jQuery library.

Here's the full implementation of the code. Try it on your local host, because sometimes it does not work on jsfiddle or similar.

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style media="screen"> .btn { padding-left: 10px; padding-right: 10px; display: inline-block !important; border-radius: 6px; color: #ffffff; padding-top: 10px; padding-bottom: 10px; } .auto { height: 20% } .bg-red{background-color:#F55C58;} .bg-red:hover{background-color:#F44946} </style> <script type="text/javascript" src="jquery-1.12.2.js"></script> </head> <body> <div class="btn bg-red"><div class="auto">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div></div> <script type="text/javascript"> var cw = $('.auto').width(); if ($('.auto').height() <= 35px) { $('.auto').css({'height':cw+'px'}); } </script> </body> </html> 

Hope this helps