html - How to get a div to have the dimensions of the image it contains -

i learning css , having trouble understanding logic , default behaviour when placing content inside divs. in project, have png play button:

it's 233 px 67 px.

in page, have "play button" inside div called "buttons"

html:

<div id="buttons">        <div id='play'>           <div class="letters">              <img src="buttons/play/playrest.png" width="100%">            </div>        </div>     </div> 

i have added borders divs try understand better.

my "buttons" divs has red border , goes down, other buttons in etc... green border "play" div holds play button.

css

#buttons {     position: absolute;     width: 28.5%;     min-height: 80%;     transform: translate(-50%, 0);     left: 50%;     top: 10%;     z-index: 1;     border: 1px solid red; }  #play {     position: relative;     min-height: 5vw;     display: block;     border: 1px solid green; } 

so here don't understand. haven't set width, why go way fit parent div "buttons" instead of wrapping play button narrower...

if rid of min-height property in play div:

#play {     position: relative; /*  min-height: 5vw;*/     display: block;     border: 1px solid green; } 

then border collapses together:

you can see green line @ top alongside red one.

i have been reading , people set display property "inline-block" hasn't helped. need have play div fit image can center div in center of buttons div, way set centred buttons div in main page.

thanks time.

p.