CODEWITHSUNDEEP
htmlcssimageaspect-ratiowindow-resize
Yulia V
Yulia V

Reputation: 3559

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

How could I remove the unwanted space above and below the images in div and table elements that appear when the images shrink? I am otherwise happy with the behaviour of my images: they shrink, and the aspect ratio does not change.

My question is similar to I have unwanted space around the images in my responsive slider when my image shrinks, but that one did not get any helpful answers. My question might be simpler though.

The original webpage is here.

The snipper is below. Here is the JSFiddle, if it is more convenient. 

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>

Upvotes: 0

Views: 67

Answers (2)

Robin Baby
Robin Baby

Reputation: 357

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

Upvotes: 1

jkdobariya
jkdobariya

Reputation: 146

you just need to add 2 attribute in table tag cellspacing="0" and cellpadding="0" or add below css to remove space

table{
    border-spacing: 0;
}

td {
    padding: 0;
}

and you set height="450px" and height="250" just remove it always keep auto height in responsive layout.

check you fiddle i updated there.

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

Upvotes: 0

Related Questions