css img 100% 高度不会调整为表格行高
以下代码不会将图像缩小到行高,我不明白为什么。 论坛上有很多类似的问题,但我似乎找不到这种行为的解释或解决方案。 我可以通过固定图像的高度来轻松解决这个问题,但这并没有让我学到任何东西:)
<html>
<head>
<style>
tr { height: 3em; }
td { height: 100%; border: 1px solid green; }
img { height: 100%; }
</style>
</head>
<body>
<table>
<tr>
<td>some text</td>
<td><img src='https://www.google.be/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png' /></td>
</tr>
<tr>
<td>other text</td>
<td><img src='https://s.yimg.com/rz/p/yahoo_frontpage_en-US_s_f_p_bestfit_frontpage_2x.png' /></td>
</tr>
</table>
</body>
Following code doesn't shrink the image to the row height and I don't understand why.
there are a lot of similar questions on the forum, but I can't seem to find the explanation or solution for this behaviour.
I can solve it easily enough by fixing the height of the image, but that doesn't learn me anything :)
<html>
<head>
<style>
tr { height: 3em; }
td { height: 100%; border: 1px solid green; }
img { height: 100%; }
</style>
</head>
<body>
<table>
<tr>
<td>some text</td>
<td><img src='https://www.google.be/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png' /></td>
</tr>
<tr>
<td>other text</td>
<td><img src='https://s.yimg.com/rz/p/yahoo_frontpage_en-US_s_f_p_bestfit_frontpage_2x.png' /></td>
</tr>
</table>
</body>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
表格单元格将调整其高度以适应其内容,这是预期的行为:内容越多,它就越高。
您可能希望为
img
提供max-height
,而不是强制td
的高度。请参阅下面的片段。A table cell will adjust its height to fit its content, which is the expected behavior: the more content you have, the taller it gets.
Rather than forcing
td
's height, you might want to givemax-height
to yourimg
. See the snippet below.