将图像作为div中的链接居中

Question

简单问题：将img置于div：

中

我div具有给定的宽度和高度，img具有未知的宽度和高度div：

<style>
    div {
        width: ...;
        height: ...;
    }
</style>
<div>
    <img src="...">
</div>

将img居中，同时保持其容纳状态很简单：

div {
    display: flex;
    align-items: center;
    justify-content: center;
}
img {
    max-width: 100%;
    max-height: 100%;
}

以下是使用此方法将500x300 img居中的几个示例：

• 在400x200 div：https://jsfiddle.net/thejonwithnoh/f9evLpx0/
中
• 在200x400 div：https://jsfiddle.net/thejonwithnoh/9dndr9r8/
中

难题：将img置于a

div内

我div具有给定的宽度和高度，img具有未知的宽度和高度，a内的div：

<style>
    div {
        width: ...;
        height: ...;
    }
</style>
<div>
    <a href="...">
        <img src="...">
    </a>
</div>

一个非常接近的解决方案就是简单地为a设置样式：

a {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

以下是使用此方法将500x300 img居中的几个示例：

• 在400x200 a中的div https://jsfiddle.net/thejonwithnoh/udo957d9/
• 在200x400的a中div：https://jsfiddle.net/thejonwithnoh/k0nj571f/

此处的问题是，img之外但div内的空间现在可以作为链接点击。

问题（tl; dr friendly）

如何将img（未知大小）置于div（已知大小）中，但也将图片作为链接？

根据评论编辑澄清/要求：

• 答案应该只在html和css（即没有javascript）
• 答案不应该依赖于任何框架（虽然框架相关的答案本身仍然很有趣，我很想看到它们，但它们不被允许用于接受＆＃34;答案）
• 图像应保持其宽高比
• 图像应该包含在div中
  • 如果图像大于任一维度中的div，则应缩放图像以使其适合该维度
  • 否则，如果图像不大于任何维度中的div，那么图像应该只是其在div中心的自然大小（尽管我很想看到图像按比例放大的解决方案适合在div中，但不允许他们接受＆＃34;接受＆＃34;回答）
• 图像外部和div内部的区域不应该是链接的一部分

Answer 1

在固定的宽度/高度image容器中将<a></a>（即使它被div包裹）对中的一种简单方法是：

＆＃13;

＆＃13;

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;
}

＆＃13;

<div>
  <a href="#"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAAEsCAMAAAACZbH6AAAAWlBMVEUAAAAAADMAAGYAAJkAAMwAAP8AKwAAKzMAK2YAK5kAK8wAK/8AVQAAVTMAVWYAVZkAVcwAVf8AgAAAgDMAgGYAgJkAgMwAgP8AqgAAqjMAqmYAqpkAqswAqv8nC+k5AAACr0lEQVR42u3VAQkAQAgEQYvYv6YlFIQbCyzcwH+VC7w+P41vDWNBNxZ0Y0EHAh0IdCDQgUDXgK4BXQO6BnQN6BrQNaBrQNeArgEdurGgGwu6saADgQ4EOhDoGtA1oGtA14CuAV0DugZ0Dega0DWgQzcWdGNBNxZ0INCBQAcCXQO6BnQN6BrQNaBrQNeArgFdA7oGdOjGgm4s6MaCDgQ6EOhAoAOBrgFdA7oGdA3oGtA1oGtA14CuAR26saAbC7qxoAOBDgQ6EOhAoGtA14CuAV0DugZ0Dega0DWga0DXMBZ0Y0E3FnQg0IFABwIdCHQN6BrQNaBr3KI75xLOs+hPNxZ0Y0EHAh0IdCDQgUDXgK4BXQO6BnQN6BrQNaBrQNeArgEdurGgGwu6saADgQ4EOhDoGtA1oGtA14CuAV0DugZ0Dega0DWgQzcWdGNBNxZ0INCBQAcCXQO6BnQN6BrQNaBrQNeArgFdA7oGdOjGgm4s6MaCDgQ6EOhAoAOBrgFdA7oGdA3oGtA1oGtA14CuAR26saAbC7qxoAOBDgQ6EOhAoGtA14CuAV0DugZ0Dega0DWga0CHbizoxoJuLOhAoAOBDgQ6EOga0DWga0DXgK6xi+6cSzjPoj/dWNCNBR0IdCDQgUAHAl0DugZ0Dega0DWga0DXgK4BXQO6BnToxoJuLOjGgg4EOhDoQKBrQNeArgFdA7oGdA3oGtA1oGtA14AO3VjQjQXdWNCBQAcCHQh0Dega0DWga0DXgK4BXQO6BnQN6BrQoRsLurGgGws6EOhAoAOBDgS6BnQN6BrQNaBrQNeArgFdA7oGdOjGgm4s6MaCDgQ6EOhAoAOBrgFdA7oGdA3oGtA1oGtA14CuAR26saAbC7qxoAOBDgQ6EOhAoGtA14CuAV0DusYuuou7AR87wv5XXaevAAAAAElFTkSuQmCC"/></a>
</div>

＆＃13;

＆＃13;

＆＃13;

设置div s＆＃39; ...
- line-height等于其height与image设置为vertical-align的{​​{1}}相对应，垂直居中。
- center到text-align，水平居中图像。