title: Maintaining Vertical Rhythm on arbitrary images
body: <p>I would like to be able to maintain vertical rhythm on a page that contains images of unknown heights. I found <a href="https://stackoverflow.com/questions/31456655/how-to-handle-responsive-images-with-vertical-rhythm">this</a> but am using <a href="http://vanilla-js.com" rel="nofollow noreferrer">vanilla-js</a> rather than jquery so a jquery plugin is out of the question. The other answer requires that the baseline be set <strong>in javascript</strong>. I already have it set in my SCSS files! I'm a very lazy programmer and don't want to type it twice. Wait, I didn't say that. I meant I'm concerned about the maintainability of duplicating hard-coded values all over the place. </p>
  
  <p><a href="https://stackoverflow.com/questions/4986944/is-it-possibly-to-keep-vertical-rhythm-using-only-css">here</a> is another solution that I have to reject because I don't like all that extra markup over style concerns. It reminds me of the days when you had to nest <code>&lt;div&gt;</code> tags four deep just to get rounded corners.</p>
  
  <p>It occurred to me to use generated content to pass JSON to the javascript. I thought I was a genius but then found <a href="https://css-tricks.com/making-sass-talk-to-javascript-with-json/" rel="nofollow noreferrer">this</a> example using the exact same method. </p>
  
  <p>Is there a better way of doing this? </p>
  
  <p>All I really want is a way to specify that the height of an element needs to be a multiple of some given value. Is there really no way to do this with just CSS? The answers I've seen say there isn't. I feel like <code>calc</code> could <em>almost</em> do the job but am not smrt enough to figure it out. Is there a better way of getting the value to the javascript? </p>
  
  <p>Thanks in advance.</p>