Website images appear smaller than they are

Question

On one of our Joomla 2.5 websites the images here http://rodoyo.com/flatnews/index.php/benefits/event-organiser-benefits appear correctly in firefox but are thumbnails in Chrome Why is that? have checked that the image sizes are correct in the backend

Answer 1

The problem is happening in all WebKit based browsers I currently have at hand i.e. Chrome (Win/OSX/IOS) and Safari (Desktop & Mobile) In your bootstrap.css you will notice this:

img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    border: 0;
    -ms-interpolation-mode: bicubic;
}

Specifically the max-width: 100% — I think you will find that as it's set to 100% of the container (in this case the surrounding <td></td>) that the problem lies in the width of the <table> columns.

Given that max-width percentages are used to calculate the width from the size of the containing block, not the element they are attached to the WebKit browsers are doing the right thing and Firefox apparently isn't (anyone with better insight please chime in here).

You could fix this by specifying the width of the first <td> like this:

<td style="width:102px;">

Or a better approach would be to not use tables for layout, as that's not what they are meant for.

Read more about using here and here.