Using PHP shortcode in HTML style="" CSS - php

Question

I'm not sure if this is possible but I'll ask anyway...
I'm trying to use the PHP shortcode in Advanced Custom fields
<?php the_field('charitynumber'); ?>
for our client to enter a number on the back end between 1-100. This will effect the height of a div showing/hiding an image based on a overall goal number for a charity. I'm thinking of setting it up like
<div style="<?php the_field('charitynumber'); ?>"><img src="/img_here.jpg"></div>
But cannot think of how to do it or an alternative way.

Answer 1

You need to put the shortcode in a valid style attribute. That means outputting the style name and appending the appropriate units. Also, if the_field() returns a string, you need to echo it.
<div style="height: <?php echo the_field('charitynumber'); ?>%;"><img src="/img_here.jpg"></div>

Answer 2

Give this a shot - you can
<div class="progress">
<div class="fillBar" style="height:calc(100% - <?php the_field('charitynumber'); ?>);"></div>
<img src="/img_here.jpg">
</div>
Then from there, you just need to style the bar. My example below has the progress bar locked to the bottom, and when you land on the page the progress bar will animate from the top down until it stops at the current percentage.
.progress{
position: relative;
width: 50px;
height: 200px;
}
.progress img{
width: 50px;
height: 200px;
position: absolute;
z-index: 1;
}
.progress .fillBar{
width: 50px;
bottom: 0;
height: 200px;
transition: height 0.3s ease-out;
}