img <a href>链接延伸到父div的整个宽度，而不是仅覆盖img</a>

Question

基本上，我将div的宽度设置为100％，其中有一个img链接。 img的宽度设置为自动，高度为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。 给出图像要显示的确切位置。 并使用原始图像的确切宽度和高度。 如果不是这样，您的图像将被拉伸。

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

这样您的图像将不会被拉伸。 但是，如果您使用像素率较低的图像，则当您使用比原始图像高的宽度，高度值时，图像将模糊。