css3 - CSS - Cropping Image Height To Match Text Length -

I have found a section to share 2 things - a top title of text, I should always have a width of image 308px , And its length is cropped according to the length of the text. I am not interested in setting a certain height for the location, because the length of the material can change, how can this be done? (Thanks!)

HTML:

  & lt; Section class = "location" & gt; & Lt; Img src = "http://evinwolverton.com/img/disc.jpg" & gt; & Lt; Header & gt; & Lt; H2 & gt; This is a title & lt; / H2 & gt; Also for branded messaging & amp; Br / & gt; Maurice Eusemode Deuce Molis & lt; Br / & gt; If this is not a commodity label, then & lt; Br / & gt; Bretttor Laguula, Egget Lacenia Audio & lt; Br / & gt; Bean Neck Elite & Lt; / Header & gt; & Lt; / Section & gt;   
 CSS:  
 . Location {boundary: 2px solid # ccc; Hidden flurry; Width: 620px; Color: # 666; Margin: 40px 0; }. Place title {float: left; Padding: 25px; Width: 258 pixels; }. Place H2 {margin: 0 10px 0; Font size: 1.2mm; Color: # 333; }. Location IMG {Float: Correct; Width: 308px; }    
 
 
 Optional solution to use background image, if you call it the actual  & Lt; Img & gt;  tag to . Place  in the relative position, hide overflow here; Give the image a complete status  
  .location {status: relative;   
 hidden flurry; }. Location img {status: complete; Top: 0 pixels; Correct: 0 pixels; }