html - 使链接与上面的图像具有相同的宽度

Question

好吧，今天我的脑子坏了，我无法解决这个基本问题。我想要一个位于图像下方的链接。图片可能有不同的宽度，假设有些是 100 像素宽，有些是 200 像素宽:

<div>     
    <img src="image.jpg" style="auto;text-align:center;display:block;padding:1em;border: 5px solid #EFEFEF;">
    <a href="link.php" style="display: inline-block;background-color:blue">WORDS</a>
</div>

如果我将链接的显示设置为内联 block ，它只占用它需要说“单词”的空间。如果我将它设置为 block 状，div 会拉伸(stretch)以容纳它，它会占用 100% 的可用空间，并且比图像宽 5 倍，比图像宽得多。

我希望链接占据 div 的整个宽度，并且我希望 div 与图像一样宽(加上填充)。

如果我以像素为单位设置 div 的宽度，如果图像的宽度不同，它看起来就不正确。我在这里缺少什么？

Answer 1

设置链接样式 display:block; 并且可能给你的图像 width="100%"