Image responsiveness breaks in 320x568 - html

Question

My Code is like this
.fairdetailimg {
margin-bottom: 20px;
}
.fairmonos {
border: 1px solid #ddd;
}
table {
background-color: transparent;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
* {
padding: 0;
margin: 0;
}
.fairmonos td {
vertical-align: top;
}
.fairdet-image, .fairdet-image img {
width: 100%;
overflow: hidden;
}
img {
vertical-align: middle;
}
img {
border: 0;
}
#media screen and (min-width: 1025px)
responsive.css:1800
td.fair-border {
vertical-align: middle;
}
td.fair-border {
vertical-align: middle;
width: 30% !important;
word-break: break-word;
}
.fair-border {
border: 1px solid #ddd;
}
.fair-mono {
text-align: center;
font-size: 25px;
margin-bottom: 15px;
font-weight: 400;
}
.fairmonos .fair-img {
width: 60%;
margin: 10px auto;
padding-top: 0px;
overflow: hidden;
}
<div class="fairdetailimg">
<table width="100%" class="fairmonos">
<tbody>
<tr>
<td width="70%">
<div class="fairdet-image">
<img src="https://preview.ibb.co/nkY9oF/1.jpg">
</div>
</td>
<td class="fair-border" width="30%">
<div class="fair-logoinfo">
<div class="fair-mono">
India Art Fair
</div>
<div class="fair-img">
<a href="#">
<img class="img-responsive" src="https://image.ibb.co/czDaTF/2.jpg">
</a>
</div>
<div class="fair-address">
<strong>Address: </strong>INDIA
</div>
</div>
</td>
</tr>
</tbody>
</table>
<div class="clearfix"></div>
</div>
Everything works fine in higher resolutions but when it goes to lower resolutions it creates a white gap below main image as shown in the pic
How can I overcome this?

Answer 1

I did a few edits just check below.
This is where Photoshop is useful i would say. I would create the image and then make my divs accordingly as some images which tend to get stretched don't look great at all.
.fairdetailimg {
/*margin-bottom: 20px;*/
}
.fairmonos {
border: 1px solid #ddd;
}
table {
background-color: transparent;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
* {
padding: 0;
margin: 0;
}
.fairmonos td {
vertical-align: top;
}
.fairdet-image, .fairdet-image img {
width: 100%;
height: 380px;
overflow: hidden;
}
.fair-img{
width: 100%;
}
img {
vertical-align: middle;
}
img {
border: 0;
}
#media screen and (min-width: 1025px)
responsive.css:1800
td.fair-border {
vertical-align: middle;
}
td.fair-border {
vertical-align: middle;
width: 30% !important;
word-break: break-word;
}
.fair-border {
border: 1px solid #ddd;
}
.fair-mono {
text-align: center;
font-size: 25px;
margin-bottom: 15px;
font-weight: 400;
}
.fairmonos .fair-img {
width: 60%;
margin: 10px auto;
padding-top: 0px;
overflow: hidden;
}
<div class="fairdetailimg">
<table width="100%" class="fairmonos">
<tbody>
<tr>
<td width="40%">
<div class="fairdet-image">
<img src="https://preview.ibb.co/nkY9oF/1.jpg">
</div>
</td>
<td class="fair-border" width="30%">
<div class="fair-logoinfo">
<div class="fair-mono">
India Art Fair
</div>
<div class="fair-img">
<a href="#">
<img class="img-responsive" src="https://image.ibb.co/czDaTF/2.jpg">
</a>
</div>
<div class="fair-address">
<strong>Address: </strong>INDIA
</div>
</div>
</td>
</tr>
</tbody>
</table>
<div class="clearfix"></div>
</div>

Answer 2

Because your image is responsive, you can either add a height to your image but this approach will make your image distorted.
EXAMPLE 1
.fairdetailimg {
margin-bottom: 20px;
}
.fairmonos {
border: 1px solid #ddd;
}
table {
background-color: transparent;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
* {
padding: 0;
margin: 0;
}
.fairmonos td {
vertical-align: top;
}
.fairdet-image, .fairdet-image img {
width: 100%;
height: 500px;
overflow: hidden;
}
img {
vertical-align: middle;
}
img {
border: 0;
}
#media screen and (min-width: 1025px)
responsive.css:1800
td.fair-border {
vertical-align: middle;
}
td.fair-border {
vertical-align: middle;
width: 30% !important;
word-break: break-word;
}
.fair-border {
border: 1px solid #ddd;
}
.fair-mono {
text-align: center;
font-size: 25px;
margin-bottom: 15px;
font-weight: 400;
}
.fairmonos .fair-img {
width: 60%;
margin: 10px auto;
padding-top: 0px;
overflow: hidden;
}
<div class="fairdetailimg">
<table width="100%" class="fairmonos">
<tbody>
<tr>
<td width="70%">
<div class="fairdet-image">
<img src="https://preview.ibb.co/nkY9oF/1.jpg">
</div>
</td>
<td class="fair-border" width="30%">
<div class="fair-logoinfo">
<div class="fair-mono">
India Art Fair
</div>
<div class="fair-img">
<a href="#">
<img class="img-responsive" src="https://image.ibb.co/czDaTF/2.jpg">
</a>
</div>
<div class="fair-address">
<strong>Address: </strong>INDIA
</div>
</div>
</td>
</tr>
</tbody>
</table>
<div class="clearfix"></div>
</div>
Or using background image with background-cover property
EXAMPLE 2
.fairdetailimg {
margin-bottom: 20px;
}
.fairmonos {
border: 1px solid #ddd;
}
table {
background-color: transparent;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
* {
padding: 0;
margin: 0;
}
.fairmonos td {
vertical-align: top;
}
.fairdet-image, .fairdet-image img {
background: url('https://preview.ibb.co/nkY9oF/1.jpg') no-repeat center center / cover;
width: 100%;
height: 500px;
overflow: hidden;
}
img {
vertical-align: middle;
}
img {
border: 0;
}
#media screen and (min-width: 1025px)
responsive.css:1800
td.fair-border {
vertical-align: middle;
}
td.fair-border {
vertical-align: middle;
width: 30% !important;
word-break: break-word;
}
.fair-border {
border: 1px solid #ddd;
}
.fair-mono {
text-align: center;
font-size: 25px;
margin-bottom: 15px;
font-weight: 400;
}
.fairmonos .fair-img {
width: 60%;
margin: 10px auto;
padding-top: 0px;
overflow: hidden;
}
<div class="fairdetailimg">
<table width="100%" class="fairmonos">
<tbody>
<tr>
<td width="70%">
<div class="fairdet-image">
</div>
</td>
<td class="fair-border" width="30%">
<div class="fair-logoinfo">
<div class="fair-mono">
India Art Fair
</div>
<div class="fair-img">
<a href="#">
<img class="img-responsive" src="https://image.ibb.co/czDaTF/2.jpg">
</a>
</div>
<div class="fair-address">
<strong>Address: </strong>INDIA
</div>
</div>
</td>
</tr>
</tbody>
</table>
<div class="clearfix"></div>
</div>