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

Basically, I've got a div with width set to 100%, within which there is an img link. The img's width is set to auto with a height of 600px. The link area stretches over the width of the whole div, in this case the width of the whole page, rather than just the img.img <a href> link stretches to full width of parent div instead of only covering 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; 
}

I don't want to change the div's width to a set value (which does work), because I want to be able to add images later on that may have different aspect ratios. Does anyone have a solution? thanks.

This shows the result if you set the width of the div manually: http://jsfiddle.net/L1xanprh/4/我也尝试只是将div宽度设置为auto，它与宽度为100％的游戏存在相同的问题。

来源

2014-10-01 Chris

div宽度是100％的什么？ – 2014-10-01 06:10:23

对于a，使它的显示inline-table

来源

2014-10-01 06:11:59 qtgye

或'.feature，.feature a {display：inline-block;}' – Anonymous 2014-10-01 06:15:24

忌用宽度：汽车。给出您想要显示图像的图像的确切位置。并使用精确的宽度和原始图像的高度。如果不是你的图像会被拉伸。

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

然后你的形象不会被拉长。但是，如果您使用较低像素率的图像，当您使用比原始图像更高的宽度和高度值时，图像将会模糊。

来源

2014-10-01 06:19:37 dennypanther

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

回答

相关问题