I've got a portfolio navigation for which I want to overlay a header \[code\]h2\[/code\] (in which a link \[code\]a\[/code\] is embedded) over an image \[code\]img\[/code\]. I'm using an img-tag because the image is part of the content, so it seems to me to be the most semantic way to structure the html.I would prefer the link to overlay the full width and height of the image, without setting a specific height or width in the css. I would prefer it to be fluid and respond to the dimensions of the image.The code looks like this:\[code\] <article> <h2><a href="http://stackoverflow.com/questions/15866927/#">Heading</a></h2> <div class="img-container"><img src="http://stackoverflow.com/questions/15866927/1.jpg" /></div> </article>\[/code\]Now I know I could sort of solve this by setting the image as a background with css and giving the container a fixed height. But as I said, I would very much prefer a solution without fixed dimensions.I understand this is difficult (maybe even impossible), so I'm open to suggestions. But I would love it if all my conditions could be satisfied. Any ideas anyone?