桌子内的图像即使高度限制在100％，也会溢出

Question

I'm going crazy, I have my website( http://piscagliacostruzioni.it/ ) divided by three frames(three rows), in the first one I have a table as menu, it uses around the 30 % of height of the screen. In this table i put some images, the table is set to 100% to fit the frame and the image are set to fit the cell(only in height, i don't care about width) so what i was expecting was the image to fit in height without overflow, but the result is the image going out of the frame from the bottom and not being displayed.

Here is an example: https://jsfiddle.net/danipisca07/g0dpr0cL/

(I used a div to simulate the frame as parent)

<div style="height : 10%">
<table style="height: 100%; table-layout:fixed">
    <tr height="65%">
        <img src="http://piscagliacostruzioni.it/scrittariga.jpg" style="height:100%"/>
    </tr>
    <tr heigth="35%">
        <img src="http://piscagliacostruzioni.it/Contatti/contatti.jpg" style="height:100%"/>
    </tr>
</table>

Tried to set the table-layout to fixed and the image display property to block but everything was useless.

I hope you will help. Thanks in advance Bye

Answer 1

Did you mean something like this: https://jsfiddle.net/g0dpr0cL/2/

1. Your code is missing <td>

2. All parent elements (including html and body ) needs a height.

   html,body{ height:100% }

Answer 2

Okay, I solved the problem(almost), instead of the first row of the table I used only the image and under it a table with only one row. To understand better see my website: piscagliacostuzioni.it, i've already uploaded the new solution. Thanks again guys

Answer 3

I think your main issue is that you're missing the <td></td> elements from inside the <tr></tr> elements.

<tr>...</tr> is a table-row.

<td>...</td> is a table-data (the columns inside a row)

So having two rows will ALWAYS wrap the second image onto a second line - that's what the rows are for.

I'm not 100% sure if I understand the layout you're trying to achieve, but try the following code:

<div>
    <table width="100%">
        <tr>
            <td>
                <img src="http://piscagliacostruzioni.it/scrittariga.jpg" style="width:100%;"/>
            </td>
            <td>
                <img src="http://piscagliacostruzioni.it/Contatti/contatti.jpg" style="width:100%;"/>
            </td>
        </tr>
    </table>
</div>