如何消除div和table中图片缩小时出现的空隙？

Question

如何删除 div 和 table 元素中图片缩小时出现的图片上方和下方不需要的 space？我对图像的其他行为很满意：它们缩小了，纵横比没有改变。

我的问题与 I have unwanted space around the images in my responsive slider when my image shrinks 类似，但那个问题没有得到任何有用的答案。不过我的问题可能更简单。

原网页是here.

狙击手在下方。这里是JSFiddle，如果方便的话。

img {
object-fit: contain;
max-width:90%; 
height: 450px;
}

html, body {
margin:0;
padding:0;
}

table, div {
  max-width:90%; 
  border:5px solid #000000;
}

table{
border-spacing: 0;
}

td {
padding: 0;
}

<table>
<tbody>
<tr><td>Typical Behaviour</td><td><img src="http://www.yu51a5.com/wp-content/uploads/SocialScience/Gorillas_fight_over_a_tomato.jpg" /></td><td><img src="http://www.yu51a5.com/wp-content/uploads/SocialScience/Tamarin_GoldenLion.jpg" /></td></tr>
</tbody>
</table>
***
<div><img src="http://www.yu51a5.com/wp-content/uploads/SocialScience/GrandBudapestHote.jpg" /><img src="http://www.yu51a5.com/wp-content/uploads/SocialScience/JB.jpeg" /></div>

Answer 1

您只需要在 table 标签 cellspacing="0" 和 cellpadding="0" 中添加 2 个属性或在 css 下方添加以删除 space

table{
    border-spacing: 0;
}

td {
    padding: 0;
}

并且您设置了 height="450px" 并且 height="250" 只是删除它始终保持自动高度在响应式布局中。

检查一下 fiddle 我在那里更新了。

<table style="max-width:90%; border:5px solid #000000;" cellspacing="0" cellpadding="0">

Answer 2

img {
object-fit: contain;
max-width:90%; 
max-height: 450px;
}

如何消除div和table中图片缩小时出现的空隙？

How to remove a gap around the image in div and table that appears when the image shrinks?

html

css

image

aspect-ratio

window-resize