Centering an image as a link within a div - html

Question

Easy problem: Centering an img within a div:
I have div with a given width and height, and an img with an unknown width and height within the div:
<style>
div {
width: ...;
height: ...;
}
</style>
<div>
<img src="...">
</div>
Centering the img while keeping it contained is easy:
div {
display: flex;
align-items: center;
justify-content: center;
}
img {
max-width: 100%;
max-height: 100%;
}
Here's a couple examples of centering a 500x300 img using this approach:
In a 400x200 div: https://jsfiddle.net/thejonwithnoh/f9evLpx0/
In a 200x400 div: https://jsfiddle.net/thejonwithnoh/9dndr9r8/
Hard problem: Centering an img within an a within a div
I have div with a given width and height, and an img with an unknown width and height within an a within the div :
<style>
div {
width: ...;
height: ...;
}
</style>
<div>
<a href="...">
<img src="...">
</a>
</div>
A solution which gets pretty close is simply to style the a as such:
a {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
Here's a couple examples of centering a 500x300 img using this approach:
In an a in a 400x200 div: https://jsfiddle.net/thejonwithnoh/udo957d9/
In an a in a 200x400 div: https://jsfiddle.net/thejonwithnoh/k0nj571f/
The problem here is that the space outside of the img but within the div is now clickable as a link.
The question (tl;dr friendly)
How can I center an img (of unknown size) within a div (of known size), but also have the image be a link?
Edit for clarifications/requirements based on comments:
The answer should only be in html and css (i.e. no javascript)
The answer should not depend on any framework (though framework dependent answers are still interesting in their own right, and I would be curious to see them, but they are not allowed for the "accepted" answer)
The image should maintain its aspect ratio
The image should be contained by the div
If the image is bigger than the div in either dimension, then the image should be scaled so that it fits that dimension
Otherwise, if the image is not bigger than the div in either dimension, then the image should simply be its natural size centered within the div (though I'd be curious to see a solution where the image is scaled up to snugly fit within the div, but they are not allowed for the "accepted" answer)
The area outside the image and inside the div should not be part of the link

Answer 1

A simple way for centering an image (even it is wrapped by <a></a>) within a fixed width/height div container is this:
div {
width: 200px;
height: 150px;
line-height: 150px;
font-size: 0px;
background-color:red;
text-align: center;
}
img {
max-width:100%;
max-height:100%;
vertical-align: middle;
}
<div>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAAEsCAMAAAACZbH6AAAAWlBMVEUAAAAAADMAAGYAAJkAAMwAAP8AKwAAKzMAK2YAK5kAK8wAK/8AVQAAVTMAVWYAVZkAVcwAVf8AgAAAgDMAgGYAgJkAgMwAgP8AqgAAqjMAqmYAqpkAqswAqv8nC+k5AAACr0lEQVR42u3VAQkAQAgEQYvYv6YlFIQbCyzcwH+VC7w+P41vDWNBNxZ0Y0EHAh0IdCDQgUDXgK4BXQO6BnQN6BrQNaBrQNeArgEdurGgGwu6saADgQ4EOhDoGtA1oGtA14CuAV0DugZ0Dega0DWgQzcWdGNBNxZ0INCBQAcCXQO6BnQN6BrQNaBrQNeArgFdA7oGdOjGgm4s6MaCDgQ6EOhAoAOBrgFdA7oGdA3oGtA1oGtA14CuAR26saAbC7qxoAOBDgQ6EOhAoGtA14CuAV0DugZ0Dega0DWga0DXMBZ0Y0E3FnQg0IFABwIdCHQN6BrQNaBr3KI75xLOs+hPNxZ0Y0EHAh0IdCDQgUDXgK4BXQO6BnQN6BrQNaBrQNeArgEdurGgGwu6saADgQ4EOhDoGtA1oGtA14CuAV0DugZ0Dega0DWgQzcWdGNBNxZ0INCBQAcCXQO6BnQN6BrQNaBrQNeArgFdA7oGdOjGgm4s6MaCDgQ6EOhAoAOBrgFdA7oGdA3oGtA1oGtA14CuAR26saAbC7qxoAOBDgQ6EOhAoGtA14CuAV0DugZ0Dega0DWga0CHbizoxoJuLOhAoAOBDgQ6EOga0DWga0DXgK6xi+6cSzjPoj/dWNCNBR0IdCDQgUAHAl0DugZ0Dega0DWga0DXgK4BXQO6BnToxoJuLOjGgg4EOhDoQKBrQNeArgFdA7oGdA3oGtA1oGtA14AO3VjQjQXdWNCBQAcCHQh0Dega0DWga0DXgK4BXQO6BnQN6BrQoRsLurGgGws6EOhAoAOBDgS6BnQN6BrQNaBrQNeArgFdA7oGdOjGgm4s6MaCDgQ6EOhAoAOBrgFdA7oGdA3oGtA1oGtA14CuAR26saAbC7qxoAOBDgQ6EOhAoGtA14CuAV0DusYuuou7AR87wv5XXaevAAAAAElFTkSuQmCC"/>
</div>
Setting the divs' ...
- line-height equal to its height combined with an image that has vertical-align set to center, centers the image vertically.
- text-align to center, centers the image horizontally.