CODEWITHSUNDEEP
htmlcss
user1849962
user1849962

Reputation: 1363

Image exceeding height in div table cell

I am trying to fit an image into a div (display: table cell). The width never exceeds the width of the div but the height always does. Although I think in IE 11 it's working fine because the overall size of the table is exactly correct. But in Chrome the computed height is 9.297px; in Firefox the computed height is 10.5px. The specified width and cell of the div in CSS is 9 pixels by 9 pixels. As you can see from the code below it is a table construction but in divs. I've played around with it for ages with the help of loads of posts on SO but I can't quite it to work perfectly. To be clear, height, cannot exceed 9 pixels.

I just wondered if anybody had any ideas to get it to work. As I say i think it's working in IE, just not the others.

I've included this JSFiddle - https://jsfiddle.net/eermepfe/ . It isn't an exact replica of my table. I have so many cells it would look ridiculous in a jsfiddle. Moreover the height stretch in the fiddle is even worse than my own broswer results; still it catches the problem.

Thanks for your help

<div id = "table">

<div class = "row">

<div class = "inner">

<img src = "image.png">

</div>

</div>


</div>

There are many rows and many divs in the rows but they follow the above set up.

CSS

#table{
display: table;
table-layout: fixed;
height: 700px;
width: 1200px;
}

.row{
display:table-row;
}

.inner{
text-align: center;
line-height: 9px;
display: table-cell;
background-color: red;
height: 9px !important;
width: 9px;
border-top: 1px solid black;
border-right: 1px solid black;  
}

img{
height: auto;
max-width: 9px;
vertical-align: middle;
display: block;
}

Upvotes: 0

Views: 472

Answers (1)

Luki Centuri
Luki Centuri

Reputation: 245

Add this style to .inner element

.inner{
    box-sizing:border-box;
    display:flex;
    align-items:flex-start;
}

Edited, Try these styles:

.table{
   width:100%;
}
.row{
   display:flex;
}
.inner{
   box-sizing:border-box;
}

Upvotes: 1

Related Questions