I have experimented with various methods like table-cell, but none of them have been successful.
All I am seeking is an <img src="" /> within an <a> tag.
The <a> element has specific width, height, and overflow:hidden properties set.
How can I display only the center part of the image without knowing its size?
Take a look at this JS Fiddle which contains the following code:
<a href="">
<img class="center" src="http://images2.fanpop.com/images/photos/7000000/Nature-Around-the-World-national-geographic-7018209-1440-900.jpg" />
</a>
<a href="">
<img class="center" src="http://naturalgeographic.net/wp/wp-content/uploads/2013/05/rock-climbing.jpg" />
</a>
<style type="text/css">
a {
position:relative;
display:inline-block;
width:300px;
height:300px;
overflow:hidden;
border:solid 5px orange;
}
img.center {
position:absolute;
display:inline-block;
top:-50%;
left:-50%;
}
</style>
If achieving this effect is not possible using just these elements, I am open to adding whatever may be necessary. However, my preference is for a solution using only HTML/CSS without involving JavaScript.
Thank you for your assistance.