CODEWITHSUNDEEP
htmlcssgoogle-chrome
IMTheNachoMan
IMTheNachoMan

Reputation: 5811

image % height dimensions not being adhered to in chrome

I've got an img in a td with both width and height set to 100%. In Chrome The width is obeyed to but the height is not. It seems to work as expected in all the other browsers.

Not sure why?

div
{
    background-color: red;
    width: 100px;
    height: 100px;
}

table
{
    width: 100%;
    height: 100%;
}

img
{
    width: 100%;
    height: 100%;
}
<div>
    <table border="1">
        <tr>
            <td>
                <img src="https://www.google.com/images/srpr/logo11w.png" />
            </td>
        </tr>
    </table>
</div>

Upvotes: 1

Views: 426

Answers (3)

ericjbasti
ericjbasti

Reputation: 2075

The problem is with the table. The image is setting its height to 100% of its container, the issue is the td is getting its height from the images original height (190px). My recommendation would be to get rid of the table all together, just put the image in the div and it will work flawlessly. Otherwise you'll need to set the td height to 100px.

perhaps this looks close enough to what you wanted : http://jsfiddle.net/ericjbasti/kv4zpkuu/6/

div{
    width: 100px;
    height: 100px;
    background: red;
}

div img{
    width: 100%;
    height: 100%;
    vertical-align:top;
    border: 4px ridge;
    box-sizing: border-box;
}

Upvotes: 1

IMTheNachoMan
IMTheNachoMan

Reputation: 5811

For future reference, I was able to get it to work by wrapping the img in a div.

div.one
{
    background-color: red;
    width: 100px;
    height: 100px;
}

table
{
    width: 100%;
    height: 100%;
}

img
{
    width: 100%;
    height: 100%;
}
<div class="one">
    <table border="1">
        <tr>
            <td>
                <div>
                    <img src="https://www.google.com/images/srpr/logo11w.png" />
                </div>
            </td>
        </tr>
    </table>
</div>

Upvotes: 0

Heroselohim
Heroselohim

Reputation: 1291

You should set a max-height or max-width to avoid an inner element to extend beyond the outter element.

HTML

<div>
    <img src="https://www.google.com/images/srpr/logo11w.png" />
</div>

CSS

div
{
    background-color: red;
    max-width: 100px;
    width: 100px;
    max-height: 100px;
    height: 100px;
}

Remember to remove all margin and padding to the table.

Upvotes: 2

Related Questions