Essentially, I have a div that spans the entire width of its container, inside it is an image link. The image's width is set to adjust automatically with a fixed height of 600px. The link covers the whole width of the div, which in this case is the width of the entire page, and not just the image.
<div class="feature">
<a href="feature-page.html"><img src="feature.jpg" /></a>
</div>
.feature {
width: 100%;
height: auto;
}
.feature a img {
width: auto;
height: 600px;
display: block;
margin: auto;
}
I'm looking for a solution where I don't need to set a specific width value for the div (although that does work). This way, I can easily add images later on that might have different aspect ratios. Any suggestions are appreciated. Thank you.
This is the result when setting the div width manually: http://jsfiddle.net/L1xanprh/4/ I also attempted setting the div width to auto, but encountered the same issue as using 100% width.