set css to parent child size

I have the following css and html, and I am trying to get my <div> following the <img> to inherit the width and height of the <img>. The following <div> is meant to be an overlay. Is there a way for the <div> to obtain the true width and height of the <img>?

I have not tried javascript yet and would prefer to do it purely with CSS, but if I must I will use javascript. I am not using jQuery at all and do not plan to.

HTML

<div class="div_1">
  <div><img src=""/><div></div></div>
  <div><img src=""/><div></div></div>
  ....
</div>

CSS

.div_1 > div {
  float: left;
  margin: 8px;
}

.div_1 > div > img {
  height: 300px;
  width: auto;
}

.div_1 > div > div {
  width: .div_1.div.img.width;
  height: .div_1.div.img.height;
}