img <a href=""> link stretches to full width of parent div instead of only covering img</a>

Question

基本上，我有一个宽度设置为100％的div，其中有一个img链接。 img的宽度设置为auto，高度为600px。链接区域在整个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％相同的问题。

Answer 1

对于a，请将其显示为inline-table

Answer 2

避免使用width：auto。 给出想要显示图像的图像的确切位置。 并使用原始图像的精确宽度和高度。 如果不是你的形象会被拉长。

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

然后你的图像不会被拉伸。但如果您使用像素率较低的图像，您的图像就会出现 当您使用比原始图像更高的宽度，高度值时模糊。