In my current project, I am faced with a challenge regarding the CSS and HTML code. I am attempting to have a <div> element positioned after an <img> element inherit the width and height of the image. This <div> is meant to act as an overlay. Is there a way to make the <div> automatically adjust its dimensions based on the width and height of the <img> without resorting to JavaScript?
At this point, I have yet to experiment with JavaScript and would prefer a solution that relies solely on CSS. However, if necessary, I am willing to incorporate JavaScript. It is worth noting that I am not using jQuery in this project and have no plans to do so.
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;
}