如何消除图像缩小时出现的div和table中图像周围的间隙？答案

【问题标题】：How to remove a gap around the image in div and table that appears when the image shrinks?如何消除图像缩小时出现的div和table中图像周围的间隙？
【发布时间】：2019-06-12 06:21:59
【问题描述】：

如何删除图像缩小时出现的 div 和 table 元素中图像上方和下方的多余空间？在其他方面我对图像的行为感到满意：它们缩小了，纵横比没有改变。

我的问题类似于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>

【问题讨论】：

标签： html css image aspect-ratio window-resize

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

table{
    border-spacing: 0;
}

td {
    padding: 0;
}

而你设置height="450px" 和height="250" 只需将其移除，在响应式布局中始终保持自动高度。

检查你的小提琴我在那里更新。

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

【讨论】：

更新了截图和JSFiddle；不幸的是没有快乐