CODEWITHSUNDEEP
htmlcsshtml-tablewebkit
Registered User
Registered User

Reputation: 3699

HTML Image relative size not stretching as expected in Chrome

What is the reason that this image doesn't stretch its height to be as it's width?

In Webkit only!

http://jsfiddle.net/CgEhg/8/

Edit: lot of people are having trouble, just use Chrome

Upvotes: 0

Views: 492

Answers (3)

Registered User
Registered User

Reputation: 3699

This is the best that you can do: http://jsfiddle.net/CgEhg/41/

<table  border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td><img src="http://www.google.com/logos/2012/stgeorge12-hp.png" /></td>       
    </tr>
</table>


table{
    height:40px;
    width:40px;
}    
img{
    height:auto;
     width:100%;
}
td,tr,tbody{
    height:100%;
    height:100%;
}

Upvotes: 0

Ravinder Reddy
Ravinder Reddy

Reputation: 23992

Unless you have multiple tables and multiple images for different data to layout, you can define same style for the table or td with img and this should work in Chrome as well with IE and Firefox.

Sample on Fiddle at http://jsfiddle.net/2BdQT/

or

css: 

table, img
{
    height:40px;
    width:40px;
}

td,tr,tbody
{
    width:100%;
    height:100%;
}

​html:

<table  border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td><img src="http://www.google.com/logos/2012/stgeorge12-hp.png"></td>

    </tr>
</table>

​

Upvotes: 1

defau1t
defau1t

Reputation: 10619

You need to style td of table instead of img tag

jsFiddle

Upvotes: 0

Related Questions