img <a href> 链接延伸到父 div 的全宽，而不是仅覆盖 img答案

【问题标题】：img <a href> link stretches to full width of parent div instead of only covering imgimg <a href> 链接延伸到父 div 的全宽，而不是仅覆盖 img
【发布时间】：2014-10-01 14:33:02
【问题描述】：

基本上，我有一个宽度设置为 100% 的 div，其中有一个 img 链接。 img 的宽度设置为自动，高度为 600 像素。链接区域延伸到整个 div 的宽度，在这种情况下是整个页面的宽度，而不仅仅是 img。

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

我不想将 div 的宽度更改为设定值（这确实有效），因为我希望以后能够添加可能具有不同纵横比的图像。有没有人有办法解决吗？谢谢。

如果您手动设置 div 的宽度，这会显示结果：http://jsfiddle.net/L1xanprh/4/ 我也尝试将 div 宽度也设置为 auto，它与宽度为 100% 的问题相同。

【问题讨论】：

div 宽度是什么的 100%？

标签： html css image hyperlink

【解决方案1】：

对于那个a，让它显示inline-table

【讨论】：

或.feature, .feature a {display: inline-block;}

【解决方案2】：

避免使用宽度：自动。给出您想要显示图像的图像的确切位置。并使用原始图像的精确宽度和高度。如果不是，您的图像将被拉伸。

如果不使用宽度和高度值，则接受比例等于原始图像的接受比例。

那么您的图像将不会被拉伸。但是，如果您使用像素率较低的图像，您的图像将当您使用比原始图像更高的宽度、高度值时会变得模糊。

【讨论】：